React 表單與事件
本章節我們將討論如何在 React 中使用表單。
HTML 表單元素與 React 中的其他 DOM 元素有所不同,因為表單元素生來就保留一些內部狀態。
在 HTML 當中，像 <input>, <textarea>, 和 <select> 這類表單元素會維持自身狀態，並根據用戶輸入進行更新。但在React中，可變的狀態通常保存在組件的狀態屬性中，並且只能用 setState() 方法進行更新。
一個簡單的實例
在實例中我們設置了輸入框 input 值 value = {this.state.data}。在輸入框值發生變化時我們可以更新 state。我們可以使用 onChange 事件來監聽 input 的變化，並修改 state。
React 實例
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Hello zaixian!'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
var value = this.state.value;
return <div>
<input type="text" value={value} onChange={this.handleChange} />
<h4>{value}</h4>
</div>;
}
}
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
上面的代碼將渲染出一個值為 Hello zaixian! 的 input 元素，並通過 onChange 事件回應更新用戶輸入的值。
實例 2
在以下實例中我們將為大家演示如何在子組件上使用表單。 onChange 方法將觸發 state 的更新並將更新的值傳遞到子組件的輸入框的 value 上來重新渲染介面。
你需要在父組件通過創建事件句柄 (handleChange) ，並作為 prop (updateStateProp) 傳遞到你的子組件上。
React 實例
class Content extends React.Component {
render() {
return <div>
<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
<h4>{this.props.myDataProp}</h4>
</div>;
}
}
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Hello zaixian!'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
}
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
Select 下拉菜單
在 React 中，不使用 selected 屬性，而在根 select 標籤上用 value 屬性來表示選中項。
React 實例
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
選擇您最喜歡的網站
<select value={this.state.value} onChange={this.handleChange}>
<option value="gg">Google</option>
<option value="rn">zaixian</option>
<option value="tb">Taobao</option>
<option value="fb">Facebook</option>
</select>
</label>
<input type="submit" value="提交" />
</form>
);
}
}
ReactDOM.render(
<FlavorForm />,
document.getElementById('example')
);
多個表單
當你有處理多個 input 元素時，你可以通過給每個元素添加一個 name 屬性，來讓處理函數根據 event.target.name 的值來選擇做什麼。
React 實例
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<form>
<label>
是否離開:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
訪客數:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
React 事件
以下實例演示通過 onClick 事件來修改數據：
React 實例
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Hello zaixian!'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: 'IT研修'})
}
render() {
var value = this.state.value;
return <div>
<button onClick={this.handleChange}>點我</button>
<h4>{value}</h4>
</div>;
}
}
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
當你需要從子組件中更新父組件的 state 時，你需要在父組件通過創建事件句柄 (handleChange) ，並作為 prop (updateStateProp) 傳遞到你的子組件上。實例如下：
React 實例
class Content extends React.Component {
render() {
return <div>
<button onClick = {this.props.updateStateProp}>點我</button>
<h4>{this.props.myDataProp}</h4>
</div>
}
}
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Hello zaixian!'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: 'IT研修'})
}
render() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
}
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);