如何處理數組內對象的 onChange（反應狀態）？

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}預先填充輸入字段， value={row.firstname}我需要定義一個onChange處理函數來更改目標對象的firstname屬性的狀態/值。

那么我的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

我認為這樣的事情會奏效。

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

Answer 2

可能這會有所幫助

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