反应钩子。单击时如何使其他项目（当前项目除外）停用

Question

我有物品清单。同步项目的最佳做法是什么，当我单击一个项目时，其他项目会停用？那么活动物品只能同时是其中之一吗？

我的代码： https://codesandbox.io/s/deezer-music-widget-s4dli

错误案例的视觉示例（2 个活动项目） screenshot

Answer 1

总体思路是将当前选中的项目存储在父列表中，并在渲染器中将 active 或 selected 标志传递给选中的项目。概念示例：

function ListOfItems(props) {
  const [selection, setSelection] = useState();

  return (
    <ul>
      {props.list.map(item => (
        <ListItem
          key={item.key}
          active={item.key === selection}
          handleClick={setSelection}
          content={item.content}
        />
      ))}
    </ul>
  );
}

function ListItem(props) {
  return (
    <li
      className={props.active ? 'active' : null}
      onClick={() => props.handleClick(props.key)}>
      {props.content}
    </li>
  );
}

反应钩子。单击时如何使其他项目（当前项目除外）停用

React Hooks. How to make other items(beside current one) deactivate when i click

javascript

listitem

reactjs

react-hooks