javascript - 如何创建单个输入处理程序

Question

这个问题在这里已经有了答案:





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

Answer 1

当需要处理多个受控输入元素时，可以给每个元素添加一个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>
 );
}
}