Css 如何在react中的两个列表项之间切换类名

我有一份联合国订单。如果单击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>
  );

const selectionArray=[“是”、“否”]；
const[selectedITem，setSelectedItem]=useState（'yes'）；
返回(

{selectionaray.map（（项）=>{
返回(
{
setSelectedItem（项目）；
}}
className={selectedITem==项目？'selected'：'''}
键={'selection-'+item}
role=“option”
aria selected=“false”
>
{item}

);
})}

);

需要在单击li时调用函数并在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>

const[selectedmens，setselectedmens]=useState（[]）；
功能菜单（e）{
console.log（“val:，e.target.value）
设置选定菜单（如目标值）
}

onClickMenu（e）}
className={selectedMenu==1？'selected'：''}>
对

onClickMenu（e）}aria selected=“false”className={selectedMenu==2？selected'：'}>
不