如何在反应中的两个列表项之间切换 className

如何解决如何在反应中的两个列表项之间切换 className

我有一个未排序的列表。如果 li 1 单击，className="selected" 将被分配给它。如果点击 li 2，className="selected" 将被分配给它，并且 className="selected" 将从 li 1 中删除。我该怎么做？提前感谢您的帮助。

 <ul>
      <li role="option" aria-selected="false">
        yes
      </li>
      <li role="option" aria-selected="false">
        no
      </li>
  </ul>

解决方法

您需要有一个状态变量来保持当前选定的项目。然后根据状态变量检查每个 li。

 const selectionArray = ['yes','no'];
  const [selectedITem,setSelectedItem] = useState('yes');
  return (
    <ul>
      {selectionArray.map((item) => {
        return (
          <li
            onClick={() => {
              setSelectedItem(item);
            }}
            className={selectedITem === item ? 'selected' : ''}
            key={'selection-' + item}
            role="option"
            aria-selected="false"
          >
            {item}
          </li>
        );
      })}
    </ul>
  );

,

需要在 li 的 OnClick 上调用函数并在 li 中添加值，然后您将获得 li 的值。见下文：

const [selectedMenu,setSelectedMenu] = useState([]);

  function onClickMenu(e) {
   console.log("val:",e.target.value)
   setSelectedMenu(e.target.value)
  }

   <ul>
    <li role="option" value="1" aria-selected="false" onClick={(e) => onClickMenu(e)} 
    className={selectedMenu === 1 ? 'selected' : ''}>
      yes
    </li>
    <li role="option" value="2" onClick={(e) => onClickMenu(e)}  aria-selected="false" className={selectedMenu === 2 ? 'selected' : ''}>
      no
    </li>
  </ul>