REACT - 单击时切换活动按钮类

Question

我需要 2 个按钮，一个用于“左侧”，一个用于“右侧”。我制作了一个单独的组件（子文件夹），我在主文件中调用它。当用户单击某个按钮时，它必须变为“活动”，获得“square-round--active”类，以便它显示在 GUI 上。然而，目前我在弄清楚如何在 2 个单独的按钮上执行此操作时遇到问题，当时只有其中一个可以处于活动状态。在我当前的代码中，当单击其中任何一个按钮时，这些按钮就会相互切换为活动状态。我该如何解决这个问题？

    const [isActive, setActive] = useState(false);

    const toggleClass = () => {
        setActive(!isActive);
    };

     <ul class="buttons-in-line no-bullets flex-line">
       <li>
          <button type="button" className={isActive ? 'square-round square-round--active square-round--min-width' : 'square-round square-round--min-width'}
          onClick={toggleClass} >Left</button>
       </li>
       <li>
          <button type="button" className={!isActive ? 'square-round square-round--active square-round--min-width' : 'square-round square-round--min-width'}
          onClick={toggleClass} >Right</button>
       </li>
     </ul>

我现在将其作为占位符，但稍后我必须调整代码以与后端一起使用，将用户选择（左或右）作为布尔值发送。我在下面添加后端代码，如果有人知道如何将所有内容组合在一起，我将非常感激。

const inoAPI = new konfiguratorreact.client.api.InoAPI();

Getters:
inoAPI.getSestav().isOdpiranjeLevo(); // boolean
inoAPI.getSestav().isOdpiranjeDesno(); // boolean

Setters:
inoAPI.getSestav().setOdpiranjeDesno(callback(success, error)))
inoAPI.getSestav().setOdpiranjeLevo(callback(success, error)))

Answer 1

您目前没有任何方法可以跟踪单击了哪个按钮。像这样的东西应该有效。

const ToggleComponent = ({ onToggle }) => {
  const [isActive, setActive] = useState(false);

  const toggleClass = (isLeft) => {
    onToggle(isLeft);

    if (isLeft)
      setActive(true);
    else
      setActive(false);
  };

 <ul class="buttons-in-line no-bullets flex-line">
   <li>
      <button type="button" className={isActive ? 'square-round square-round--active square-round--min-width' : 'square-round square-round--min-width'}
      onClick={() => toggleClass(true)} >Left</button>
   </li>
   <li>
      <button type="button" className={!isActive ? 'square-round square-round--active square-round--min-width' : 'square-round square-round--min-width'}
      onClick={() => toggleClass(false)} >Right</button>
   </li>
 </ul>
}

父组件

const ParentComponent = () => {
  [isActive, setIsActive] = useState(false);

  const handleToggle = (isActive) => {
    setActive(isActive);
  }

  return (
    <ToggleComponent onToggle={handleToggle} />
  );
}