在 React 中选择表格行

Posted 2023-02-22

【中文标题】在 React 中选择表格行

【英文标题】：Select Table Row in React

【发布时间】：2020-10-27 09:15:33

【问题描述】：

我试图在我的 React Material App 中一次只选择一行。我现在的问题是它突出显示了许多行。我只需要一次突出显示/选择一行。

请检查此代码框链接

CLICK HERE

代码

const [selected, setSelected] = React.useState([]);

const selectFood = (event, food) => 
  const selectedIndex = selected.indexOf(food.name);
  let newSelected = [];

  if (selectedIndex === -1) 
    newSelected = newSelected.concat(selected, food.name);
   else if (selectedIndex === 0) 
    newSelected = newSelected.concat(selected.slice(1));
   else if (selectedIndex === selected.length - 1) 
    newSelected = newSelected.concat(selected.slice(0, -1));
   else if (selectedIndex > 0) 
    newSelected = newSelected.concat(
      selected.slice(0, selectedIndex),
      selected.slice(selectedIndex + 1)
    );
  

  setSelected(newSelected);
;

const isSelected = row => selected.indexOf(row.name) !== -1;

【参考方案1】：

如果您只想选择一行 - 那么这肯定会起作用（不需要您编写的复杂代码）

const selectFood = (event, food) => 
    let newSelected = [food.name];
    setSelected(newSelected);
  ;

工作链接 - https://codesandbox.io/s/highlightselect-rows-react-material-8ejbc?file=/demo.js:1016-1123