如何在表格(网格)中只选择一行？

Question

我有一个用来在(https://www.telerik.com/kendo-react-ui/components/grid/selection/).I中选择的网格，实际上有一个数据数组，例如：

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

使用此方法，当用户单击某行时，它(已选中)将变为true：

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

在这种情况下，用户可以选择任何行，但我只希望能够选择一行.我想要的是只有一行是selected.In事实，无论选择哪一行，其他的行将是selected :false

Answer 1

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

在这里，如果选择了该项，则它将更改为false，所有其他项都将更改为false；如果未选择该项，则将更改为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;
    });

请参阅更新后的fiddle https://stackblitz.com/edit/react-7wmlfp?file=app/main.jsx

Answer 2

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