表單處理多個(gè)input輸入數(shù)據(jù)
當(dāng)需要處理多個(gè) input 元素時(shí)什燕，我們可以給每個(gè)元素添加 name 屬性袜蚕，并讓處理函數(shù)根據(jù) event.target.name 的值選擇要執(zhí)行的操作糕殉。
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>
來賓人數(shù):
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
這里使用了 ES6 計(jì)算屬性名稱的語法更新給定輸入名稱對(duì)應(yīng)的 state 值：
例如：
this.setState({
[name]:value
})
