如何在表格（网格）中只选择一行？答案

【问题标题】：How can I select only one row in a table(grid)?如何在表格（网格）中只选择一行？
【发布时间】：2021-05-05 04:58:46
【问题描述】：

我有一个网格，用于在里面选择（https://www.telerik.com/kendo-react-ui/components/grid/selection/）。我实际上有一个数据数组，例如：

[{title:'test' ,id:1 ,selected :false}
 {title:'test2' ,id:2 ,selected :false}
 {title:'test2' ,id:3 ,selected :false}]

使用这种方法，当用户点击一行时，它（选中）变为真：

  selectionChange = (event) => {
        const data = this.state.items.map(item=>{
            if(item.Id === event.dataItem.Id){
                item.selected = !event.dataItem.selected;
            }
            return item;
        });    
    }

在这种情况下，用户可以选择任何行，但我希望只能选择一行..... 我想要的是只选择一行。实际上，无论选择什么行，其他行都是selected :false

【问题讨论】：

` if(item.Id === event.dataItem.Id){ item.selected = !event.dataItem.selected; }` 在这个 if 条件之后，添加 item.selected = false;并在 if 条件中添加 rerun false。

标签： javascript arrays reactjs kendo-grid

【解决方案1】：

一种简单的方法是将所有项目=> 设置为 false，并将唯一匹配的项目设置为 true。

这里如果item被选中，则变为false，其他全部为false，如果item没有被选中，则变为true，其他全部为false。

   const data = this.state.data.map(item=>{         
        if(item.ProductID === event.dataItem.ProductID){
            item.selected = !event.dataItem.selected;
            return item;
        }
       item.selected = false;
        return item;
    });

查看更新的小提琴 https://stackblitz.com/edit/react-7wmlfp?file=app/main.jsx

【讨论】：

@zahrazamani 不客气。感谢您接受我的回答

【解决方案2】：

selectionChange = (event) => {
    const data = this.state.items.map(item =>{
        item.selected = item.Id === event.dataItem.Id;
        
        return item;
    });
}

【讨论】：