- 在React中，有时一个组件中会有多个事件处理函数，代码格式上差别不大，这样往往会造成重复的编写类似的代码
handleChange1...
handleChange2...
handleChange3...
class ConstrolInput extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'hello world',
selected: 'boy',
checked: false
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleInput = this.handleInput.bind(this);
this.handleSelected = this.handleSelected.bind(this);
this.handleCheck = this.handleCheck.bind(this);
}
handleSubmit(event) {
event.preventDefault();
console.log(this.state);
}
handleInput(e) {
this.setState({name: e.target.value});
}
handleSelected(e) {
this.setState({selected: e.target.value});
}
handleCheck(e) {
this.setState({checked: e.target.checked});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<p>
<input defaultValue={this.state.name} onChange={this.handleInput} />
</p>
<p>
<select value={this.state.selected} onChange={this.handleSelected}>
<option value="boy">男</option>
<option value="girl">女</option>
</select>
</p>
<p>
<label>
<input type="checkbox" checked={this.state.checked} onChange={this.handleCheck} />
请阅读条款
</label>
<button type="submit">Alert</button>
</p>
</form>
);
}
}
- 解决的方法是将这类处理函数整合成一个函数
onChange={this.handleChange}
- bind 复用: 利用bind在绑定this的时候能预先传入参数的特性
class ConstrolInput extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'hello world',
selected: 'boy',
checked: false
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
console.log(this.state);
}
handleChange(name, event) {
let newState= {};
newState[name] = name === "checked" ? event.target.checked
: event.target.value;
this.setState(newState);
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<p>
<input defaultValue={this.state.name} onChange={this.handleChange.bind(this, 'name')} />
</p>
<p>
<select value={this.state.selected} onChange={this.handleChange.bind(this, 'selected')}>
<option value="boy">男</option>
<option value="girl">女</option>
</select>
</p>
<p>
<label>
<input type="checkbox" checked={this.state.checked} onChange={this.handleChange.bind(this, 'checked')} />
请阅读条款
</label>
<button type="submit">Alert</button>
</p>
</form>
);
}
}
class ConstrolInput extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'hello world',
selected: 'boy',
checked: false
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleSubmit(event) {
event.preventDefault();
console.log(this.state);
}
handleChange(event) {
let newState= {};
const name = event.target.name;
newState[name] = name === 'checked' ? event.target.checked
: event.target.value;
this.setState(newState);
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<p>
<input name="name" defaultValue={this.state.name} onChange={this.handleChange} />
</p>
<p>
<select name="selected" value={this.state.selected} onChange={this.handleChange}>
<option value="boy">男</option>
<option value="girl">女</option>
</select>
</p>
<p>
<label>
<input name="checked" type="checkbox" checked={this.state.checked} onChange={this.handleChange} />
请阅读条款
</label>
<button type="submit">Alert</button>
</p>
</form>
);
}
}
