Javascript 对一次更改事件的多个输入使用单个处理程序

我有一堆输入，我不想有像这样的多个处理程序

handleInput1（）{}

，

handleInput2（）{}

等等

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

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

如何使用listen-to-only-one处理程序并在react中使用setState

---

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

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')
);

类HelloWorldComponent扩展了React.Component{
构造函数（）{
超级（）；
此.state={
结果：[]
}
}
手动输入（e）{
console.log（如target.value）；
var result=[…this.state.result]；
var idx=result.map（函数（val）{return val.name}）.indexOf（e.target.name）；
如果（idx>-1）{
结果[idx].value=e.target.value；
}否则{
push（{name:e.target.name，value:e.target.value}）；
}
this.setState（{result}）
}
handleClick（）{
console.log（this.state.result）；
}
render（）{
报税表（
提交
);
}
}
反应(
,
document.getElementById（'react\u example'）
);

---

因此，您可以显式地将密钥字符串绑定到单个处理程序函数上，如下所示：

_handleInput(key, val) {
  let { ..state } = this.state;
  state[key] = val;
  this.setState(state);
}
render() {
  return <div>
           <input
            onChange={this.handleInput.bind(null, key1)}
            value={this.state.key1} />
           <input
            onChange={this.handleInput.bind(null, key2)}
            value={this.state.key2} />
         </div>
}

\u手动输入（键，val）{
设{..state}=this.state；
状态[键]=val；
本.设置状态（状态）；
}
render（）{
返回
}

您可以将

name

属性添加到输入中，并获得

target.name

如下：

_handleInput(event) {
    let name = event.target.name;
    let value = event.target.value;
  this.setState({[name] : value});
}

<input
    onChange={this._handleInput}
    value={this.state.key1} 
    name="key1"
/>

\u手动输入（事件）{
让name=event.target.name；
让值=event.target.value；
this.setState（{[name]：value}）；
}

如果您将状态模型更改为每个表单元素有一个键，并使用一些像箭头这样的现成函数以更简洁的语法捕获变量范围，则可以简化：

类HelloWorldComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
"3": {},
"4": {},
"5": {}
}
}
handleInput（名称、值）{
这是我的国家({
[姓名]：{
姓名:姓名,，
价值：价值
}
});
}
handleClick（）{
console.log（this.state）；
}
render（）{
报税表（
this.handleInput（3，e.target.value）}/>
this.handleInput（4，e.target.value）}/>
this.handleInput（5，e.target.value）}/>
this.handleClick（）}>submit
);
}
}
反应(
,
document.getElementById（'react\u example'）
);

如果您的状态是一个没有任何键控的值数组，将迫使您在状态中搜索并替换它（如其他一些答案所示）

通常，简化内容以提高可读性和理解力是一个更好的主意

---

回想一下，React状态是加法状态，因此仅通过部分状态更改调用

setState

，将其与现有状态合并。只有在状态中键入数据时，才能获得此好处。

因为它是要修改的数组，所以可以使用数组索引。假设初始状态是这样

this.state = {
  array: [{
    name: 3,
    value: 1000
  },{
    name: 5,
    value: 1000
  }]
}

然后输入可以是这样的（对于名为3且索引为0的输入）

---

好吧，这看起来有点复杂，但让我试着在这里解释一下。因此

handleChange

方法采用两个参数-与输入文本相对应的

事件

和

索引

，后者是状态数组中元素的数组索引（在我们的示例中为0）。因此，在

this.setState

中，我们采用了

prevState

并使用了一些拼接

…prevState.array.slice（0，index）

对应于我们正在修改的数组之前的所有数组元素

…prevState.slice（索引+1）

对应于后面的所有内容。所以我们把这两个集合用中间的修改元素连接起来。

Object.assign（）

对应于修改后的元素。它所做的是使用

prevState.array[index]

这是我们正在修改的元素，并将它的

value

设置为与文本对应的

event.target.value

。

wow看起来太复杂了，我期待着类似splice或lodash find的东西。var result=this.state.result有什么问题？为什么需要在这里使用

…

？这对您来说不需要任何依赖关系，而且我相信这并不复杂。好的，我现在慢慢地理解了，但是为什么需要。。。将结果的状态设置为var result？您不能直接修改状态，因此您使用扩展运算符将状态值设置为我们可以修改的局部变量，然后将其设置为state

如何假设第一项的名称为3？好的，因此数组中的元素不是固定的？如果元素是随机的，并且输入是从数组生成的，那么您可以执行类似于

的操作，这样人们就会知道哪个输入对应于哪个名称。我假设你自己设置初始状态。

<input value={this.state.array[0].value} onChange={this.handleChange.bind(this,0)}/>

handleChange(index,event){
this.setState((prevState) => ({array:[  
        ...prevState.array.slice(0, index),
        Object.assign({},prevState.array[index],{value:event.target.value}),
        ...prevState.array.slice(index + 1)
        ]}))
}