基于单击该行中的按钮突出显示或删除该行

Question

我正在使用 React-Table，我的 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");
}

有没有办法在我单击“终止”按钮时删除该行，以及在我单击“生成”按钮时突出显示该行？

我的按钮可以正常工作，因为弹出警报，但我不知道如何与每个按钮组所属的行进行交互。

谢谢！

Answer 1

我想既然你正在使用 react-table 你已经定义了 data 对象。
您需要修改此 data 对象，例如过滤掉已删除的 row.original.id，这应该会使用新行重新呈现您的组件。

基于单击该行中的按钮突出显示或删除该行

Highlighting or removing a row based on the click of a button in that row

javascript

ecmascript-6

reactjs

react-table