代码之家 › 专栏 › 技术社区 › cpage

“添加编辑”按钮可对打开的表格做出反应,以编辑用编辑覆盖表格行的行属性

react-table reactjs

0

cpage · 技术社区 · 5 年前

我试图在我的每一行中添加一个编辑按钮 react-table 这将打开一个模式表单,允许用户保存对行的不同属性的编辑(其中一些属性可能会显示在表中,也可能不会显示在表中)。在模式中单击“保存”后,会向API发出post请求,并且 反应台 将使用响应进行更新。

我试图添加一个 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

0 回复 | 直到 5 年前

1

4

jeremy302 5 年前

未定义的原因是您已重写了行。默认情况下,单击按钮时,它会调用onClick()方法,并将事件作为第一个参数传递给函数。onClick函数调用这个参数“row”,所以当您引用row时,您引用的是事件参数,而不是实际的行;

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

此外,在查看沙盒代码后,发现“row”变量没有任何“original”属性,而是有另一个“row”属性,该属性具有“original”属性:

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

2

0

Nghi Nguyen 5 年前

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

原因访问器:“action”将映射到数据项,但在那里找不到它,然后返回undefined。然后在初始化数据阶段,我又添加了一个属性。你的单元格函数也有点语法错误。我在沙箱里更新了它。你可以查一下