React Hooks。当我单击[关闭]

Question

如何禁用其他项目（当前项目除外）

关闭。这个问题需要更多focused。它当前不接受答案。

---

是否要改善此问题？更新问题，使其仅按editing this post专注于一个问题。

已关闭21小时前。

我有项目清单。有什么最佳方案来同步项目，当我单击一个项目时，另一个项目却被停用？那么活动项只能同时是其中之一吗？

我的代码：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>
  );
}