这个问题在这里已经有了答案:
Handle change event of all input fields without using refs
(2 个回答)
1年前关闭。
我有几个输入,每个输入都有自己的值。我怎样才能拥有所有(onChange)的功能?
例如
handleChange1(event) {
this.setState({value1: event.target.value});
}
handleChange2(event) {
this.setState({value2: event.target.value});
}
}
handleChange3(event) {
this.setState({value3: event.target.value});
}
<input type="text" value={this.state.value1} onChange={this.handleChange1} />
<input type="text" value={this.state.value2} onChange={this.handleChange2} />
<input type="text" value={this.state.value3} onChange={this.handleChange3} />
我只想拥有一个handleChange
最佳答案
当需要处理多个受控输入元素时,可以给每个元素添加一个name属性,让handler函数根据event.target.name
的值来选择要做什么.
例如:
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>
value1:
<input
name="value1"
type="checkbox"
checked={this.state.value1}
onChange={this.handleInputChange} />
</label>
<br />
<label>
value2:
<input
name="value2"
type="number"
value={this.state.value2}
onChange={this.handleInputChange} />
</label>
<br />
<label>
value3:
<input
name="value3"
type="text"
value={this.state.value3}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
关于javascript - 如何创建单个输入处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63870067/