javascript - 对多个输入 onChange 事件使用单个处理程序

Question

我有一堆输入，我不想有多个处理程序，比如

handleInput1(){}、handleInput2(){} 等等。

但是我很难生成下面的对象数组

[{
  name: 3,
  value: 1000
},{
  name: 5,
  value: 1000
}]

我怎样才能只听一个处理程序并在 react 中使用 setState？

http://jsbin.com/godesacici/edit?js,console,output

Answer 1

您可以尝试通过以下方式通过名称属性区分不同的输入并将结果存储在状态中

class HelloWorldComponent extends React.Component {
  constructor(){
    super();
    this.state = {
      result: []
    }
  }
  handleInput(e) {
      console.log(e.target.value);
      var result = [...this.state.result];
      var idx = result.map(function(val){ return val.name}).indexOf(e.target.name);
      if(idx > -1) {
          result[idx].value=e.target.value;
      } else {
        result.push({name: e.target.name, value:e.target.value});
      }
       this.setState({result})
  }

  handleClick() {
    console.log(this.state.result);
  }

  render() {
    return (      
      <div>
      <div><input type="number" name="4" onChange={this.handleInput.bind(this)}/></div>
      <div><input type="number" name="3" onChange={this.handleInput.bind(this)}/></div>
      <div><input type="number" name="5" onChange={this.handleInput.bind(this)}/></div>
        <button onClick={this.handleClick.bind(this)}>submit</button>
      </div>
    );
  }
}

React.render(
  <HelloWorldComponent name="Joe Schmoe"/>,
  document.getElementById('react_example')
);

JSBIN