根据点击该行的按钮来高亮或删除该行。

Question

我使用的是React-Table，我在表格的每一行的第一个单元格里有两个按钮，代码是这样的。

const columns = React.useMemo(
 () => [

 {
    Header: 'Available Aliens',
    columns: [
    {
        Header: 'Generate/Kill',
        className: "lifeForceRow",
        Cell: ({ row }) =>
                       <div>
                           <Button variant="success" onClick={() => 
                            handleGenerate(row.original.id)}>Generate</Button>
                           <Button variant="danger" onClick={() => 
                            handleKill(row.original.id)}>Kill</Button>
                       </div>
    },

    {
        Header: 'Planet',
        accessor: 'planetName'
    },
    {
        Header: 'Galaxy',
        accessor: 'galaxyName'
    }
            ]
        }
    ],
    []
)

然后两个处理每次点击的函数是这样的：

const handleGenerate = (e) => {
    alert("Alien Generated");
}

const handleKill = (e) => {
    alert("Alien Killed");
}

有没有办法在我点击 "删除 "按钮时删除这行 还有办法在我点击 "生成 "按钮时高亮这行？

因为弹出了提示，所以我让按钮工作了，但是我想不出如何与每个按钮组所属的行进行交互。

谢谢！我使用的是React-Table，但我不知道如何与每个按钮组所属的行进行交互。

Answer 1

我想因为你使用的是react-table，所以你已经定义了以下内容 data 对象。您需要修改这个 data 对象，例如过滤掉已删除的 row.original.id 这样就可以用新的行重新渲染你的组件。