更新React

Question

我在ReactJS中有一个表，它使用map函数显示数据库中的数据。它的工作原理如下：

 displayData(){
 return this.state.legoParts.map((legoPart) => (
  <tr key={legoPart.id} onClick={() => this.showForm(legoPart)}>
    <td>
    {legoPart.piece}
    </td>
    <td>
    {legoPart.type}
    </td>
  </tr>
   )
 )
}

但是我想要一个表单，使用与表行相同的数据，在单击该行时显示，以便我可以使用该表单来更新数据。老实说，我不知道如何解决这个问题 - 我不确定是否应该将表格放在表格中，并在点击或其他时显示。任何帮助将不胜感激！

Answer 1

您需要使用自己的应用状态来跟踪正在编辑的部分，并在渲染表时，根据该应用状态决定是否渲染表格行或表单。我在这里举了一个例子：https://codesandbox.io/s/624p7zpzww