javascript - 如何处理数组内对象的 onChange(React State)？

Question

社区，

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

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

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

<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 处理函数来更改目标对象的 的状态/值>名字属性。

那么我的 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”的现有字母/值。此外，状态不会自动刷新，因此只有最后输入的字母才会显示/保留。我需要输入字段具有像任何随意输入字段一样的功能。 事件.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

我认为这样的事情会起作用。

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)}