javascript - react Hook 。单击时如何使其他项目(当前项目除外)停用

Question

我有元素 list 。 当我单击一个项目时，其他项目就会停用，同步项目的最佳做法是什么？ 那么事件项只能同时是其中之一？

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