如何处理数组内对象的 onChange（反应状态）？

Question

社区，

我正在尝试构建一个 table，其中的行根据对象数组呈现：

this.state = {
  tableContent: [
    { 
      id: this.state.tableContent.length,
      firstname:"",
      lastname:""
    },
    ...
  ]

每一行显示一个对象。（本例中为 2 列，n 行）每个单元格也是一个输入字段，因此用户可以操作 table:

<tbody>
  {this.state.tableContent.map((row) => {
    return(
      <tr key={row.id}>
        <td><input value={row.firstname} onChange={this.handleFirstNameChange}> </input></td>
        ...
      </tr>
    )
  })}
</tbody>

我希望每个单元格/输入字段在用户更改输入值和状态时显示更改。因为我用 value={row.firstname} 预填充了输入字段，所以我需要定义一个 onChange 处理函数来更改目标对象的 firstname属性的 state/value。

那么我的 onChange 处理函数是什么样子的？我尝试使用点差，但到目前为止无济于事...

一些想法：使用标准过程不起作用，因为我有一个嵌套状态（对象数组）：

handleChange = (event) => { this.setState({ firstname: event.target.value }) }

尝试使用扩展运算符也会导致一些奇怪的混乱：（这里的代码有点错误：也许你可以修复它？）

handleFirstNameChange = (event) => {
    const {tableContent} = {...this.state};
    const currentState = tableContent;
    const { firstname, value } = event.target;
    currentState[0] = value;
    this.setState({ tableContent: currentState});
  }

感谢任何帮助！

编辑：下面的代码似乎几乎可以工作。（感谢@Nikhil）但是现在，每当用户在输入字段中键入内容时，他们键入的每个字母都会替换 'row.firstname' 的现有字母/值。此外，状态不会自动刷新，因此只会显示/保留最后输入的字母。我需要输入字段具有的功能就像任何随意的输入字段一样。 event.persist();似乎需要保持事件价值。

handleFirstNameChange = (id, event) => {
    event.persist(); 
    this.setState(prevState => {
      tableContent : prevState.tableContent.forEach((row) => {
        if(row.id === id) { row.firstname = event.target.value}
      })
    })
  }

输入如下所示：

onChange={(event) => this.handleWNRChange(row.id,event)}

Answer 1

这可能会有帮助

{this.state.tableContent.map((row, index) => {
    return(
      <tr key={row.firstname}>
        <td><input value={row.firstname}
             onChange={(event)=>this.handleFirstNameChange(event, index)> </input></td>
      </tr>
    )
  })
}

handleFirstNameChange(event, index){
  this.setState((prevState => {
      tableContent : prevState.tableContent.forEach((row,i)=>{
        if(index === i) row.firstname = event.target.value
      })
  })
}

Answer 2

我认为这样的方法可行。

const handleFirstNameChange = (id, event) => {
    event.preventDefault();
    const {tableContext} = this.state;

    const myRowIndex = tableContext.findIndex((row) => row.id === id);
    tableContext[myRowIndex].firstname = event.target.value;

    this.setState({ tableContext });
}

这就是您所需要的。只需将此方法分配给 input 元素的 onChange 即可。像这样：

onChange={(event) => this.handleFirstNameChange(row.id, event)}

如何处理数组内对象的 onChange（反应状态）？

How do I handle onChange of objects inside an array (React State)?

html

javascript

setstate

reactjs