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

Question

I have a grid that I used to Selection inside( https://www.telerik.com/kendo-react-ui/components/grid/selection/ ).I actually have an array of data for example:

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

With this method, when the user clicks on a line, it (selected) becomes true:

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

In this case, the user can select any of the rows, but I want to be able to select only one row..... What I want is for only one line to be selected.In fact, whatever line is selected, the other lines will be selected:false

Answer 1

An easy way is to set all the items=> selected as false, and true to the only matching item.

Here if the item is selected, then it will change to false and all the other as false, if the item is not selected, then will change to true and all the other selected as 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;
    });

See the updated 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;
    });
}