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

Posted 2023-02-22

【中文标题】如何创建一个可重用的函数来设置变量对象属性的状态？

【英文标题】：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 很陌生。谢谢。

【问题讨论】：

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

【参考方案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 :)

此代码未指定我正在编辑数组中的哪个项目。

其实，你可以试试这段代码。