我怎樣才能 select 在表格（網格）中只有一行？

Question

我有一個網格，我曾經在里面選擇（ 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}]

使用此方法，當用戶單擊一行時，它（已選中）變為 true：

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

在這種情況下，用戶可以 select 任何一行，但我希望能夠 select 只有一行.....我想要的是只選擇一行。事實上，無論選擇什么行，將selected:false

Answer 1

一個簡單的方法是將所有的 items=> selected 設置為 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

Answer 2

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