将编辑按钮添加到反应表，打开模式来编辑行属性，通过编辑覆盖表行

Question

我试图向我的每一行添加一个“编辑”按钮，react-table该按钮打开一个模态表单，允许用户将编辑保存到该行的不同属性（其中一些属性可能会或可能不会显示在表中）。在模态中单击“保存”后，将向 API 发出发布请求，并react-table使用响应更新其中的行。

我试图添加一个onClick调用函数的handleEdit函数，但是传递给的所有内容handleEdit都是未定义的？如何访问行属性（甚至是未在表中显示的属性）并用新值覆盖它们？

Header: 'Action',
            accessor: 'action',
            Cell: row => (
            <div>
               <button onClick={row => handleEdit(row.original)}>Edit</button>
            </div>
            ),

function handleEdit(row) {
    console.log(row);
    // display modal
    // say user types in modal new firstName
    // post request

    // set row.firstName = newFirstName
 
  }

这是沙箱：https://codesandbox.io/s/elated-currying-scvxk? fontsize=14&hidenavigation=1&theme=dark

Answer 1

您未定义的原因是因为您已覆盖行。默认情况下，单击按钮时，它会调用 onClick() 方法并将 Event 作为第一个参数传递给该函数。您的 onClick 函数调用此参数“row”，因此当您引用 row 时，您引用的是事件参数而不是实际行；

您可以尝试更改参数名称，以便“row”仍然引用原始变量；

另外，在查看您的沙箱代码后，发现“row”变量没有任何“original”属性，而是具有另一个具有“original”属性的“row”属性：

Header: 'Action',
            accessor: 'action',
            Cell: row => (
            <div>
               <button onClick={e=> handleEdit(row.row.original)}>Edit</button>
            </div>
            ),