将编辑按钮添加到 react-table，打开模态以编辑行属性，用编辑覆盖 table 行

Question

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

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

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() 方法并将事件作为第一个参数传递给该函数。您的 onClick 函数调用此参数 'row'，因此当您引用行时，您引用的是事件参数而不是实际行；

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

此外，在查看您的沙箱代码后，发现 'row' 变量没有任何 'original' 属性，而是有另一个 'row' 属性其中有 'original' 属性:

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

Answer 2

我在这里修好了。 https://codesandbox.io/s/cocky-poincare-b24mt

原因访问器：'action' 将映射到数据项，但在那里找不到它，因此它 return 未定义。然后在你的初始化数据阶段，我再添加一个属性用于操作。您的 Cell 函数的语法也有点错误。我在我的沙盒中更新了它。你可以看看

将编辑按钮添加到 react-table，打开模态以编辑行属性，用编辑覆盖 table 行

Add Edit Button to react-table that opens up modal to edit row attributes that overwrites table row with edits

reactjs

react-table