如何创建一个可重用的函数来设置变量对象属性的状态？答案

【问题标题】：How can I create a reusable function that will setState for a variable object property?如何创建一个可重用的函数来设置变量对象属性的状态？
【发布时间】：2020-01-01 17:23:32
【问题描述】：

我有一个 onChange 函数来更新我所有表单输入的状态。我在这里尝试更新的状态作为对象嵌套在数组中，但我不确定如何创建一个可重用的函数，该函数将根据更改的表单输入更新特定的对象属性。

这是我的功能：

onChangeHandler = (e, index) => {
  let currentStateObject = [...this.state.fundGroups]; //copying the current state

  // This works, but I don't want allocationName to be hardcoded. 
  // How can I pass in a variable that relates to the specific property 
  // based on which input field is changed?
  currentStateObject[index].allocationName = e.target.value; 
  this.setState({
    currentStateObject
  });
}

这是我尝试过的，但它不起作用并用无效的令牌消息破坏了我的代码：

currentStateObject[index].[e.target.name] = e.target.

我尝试这样做是因为在我的输入字段中，我添加了name="allocationName"

有谁知道我是否即将解决这个问题？我对 React 很陌生。谢谢。

【问题讨论】：

为什么这个问题的票数接近？

标签： javascript arrays reactjs object setstate

【解决方案1】：

你几乎明白了。只需删除 [index] 和 [e.target.name] 之间的 . 即可：

currentStateObject[index][e.target.name] = e.target.value;

【讨论】：

我要用键盘敲自己的头。太感谢了。我会试试这个。
对 OP 的当前代码进行另一项更改以使其正常工作是执行this.setState( { fundGroups: currentStateObject } )。

【解决方案2】：

这里是一些状态操作的例子

state = {
    random: [],
    counter: 1
  }


  stateHandler = (e)=>{
    let oldrandom = [...this.state.random]
    oldrandom[e.target.name] = e.target.value;
    this.setState({random:oldrandom })
  }




manipulate state with a functional approach

 stateHandler = ()=>{
        this.setState((state,props)=>{
          counter: state.counter+props.increment
       })
      }

【讨论】：

【解决方案3】：

你可以简单地：

onChangeHandler(event) {
   this.setState({ [event.target.name]: event.target.value })
}

【讨论】：

这通常有效，但正如我在他的代码中看到的那样，他还使用index 来处理。 :)
这没有意义tbh :)
此代码未指定我正在编辑数组中的哪个项目。
其实，你可以试试这段代码。