如何使用 UseState 在 React 中操作按钮集？

Question

你好，我是新手，我想在你按下按钮时让按钮亮起来，但它们是一组按钮，我希望这组按钮中的其他按钮也不要按一个就亮。

目前我使用的是 UseState()，它只是打开和关闭所有按钮。 解决此问题的最佳做法是什么，因为创建 30 个单独的按钮功能似乎不切实际。

  const [ticket, setTicket]=useState(false)


  const ticketHandler = () => {
    setTicket (!ticket);
  }

  <button onClick={ticketHandler} className={`${ticket? 'is-success': ''} button`}>1-5</button>
  <button onClick={ticketHandler} className={`${ticket? 'is-success': ''} button`}>6-9</button>

在此示例中，票“1-5”和票“6-9”都亮起绿色

Answer 1

您应该创建一个单独的 Button 组件并在其中保留 light-up 逻辑。这将解决您的问题。

const Button = ({ buttonText }) => {
  const [ticket, setTicket] = useState(false);

  const ticketHandler = () => {
    setTicket(!ticket);
  };

  return (
    <button
      onClick={ticketHandler}
      className={`${ticket ? "is-success" : ""} button`}
    >
      {buttonText}
    </button>
  );
};

并像这样创建按钮：

<Button buttonText="1-5"/>
<Button buttonText="6-9"/>

Answer 2

我建议为您的按钮赋值并将其传递给您的处理程序。

并将值分配给票而不是将票设为布尔值

所以，

const ticketHandler = (element) => {
    setTicket(element.value);

      };

const getClass = (condition) => ticket === condition ? 'is-success': ''

按钮：

<button onClick={ticketHandler} value ="oneToFive" className={`${getClass("oneToFive")} button`}>1-5</button>
<button onClick={ticketHandler} value="sixToNine" className={`${getClass("sixToNine")} button`}>6-9</button>

Answer 3

您只需要存储一个可以在状态中使用的值（我使用“1-5”），然后对照它进行检查。

function RadioButtonGroup() {
  const [active, setActive] = useState('');

  const handleClick = (value) => () => {
    setActive(value);
  };

  return (
    <div>
      <button
        className={`${active === '1-5' ? 'is-active' : ''}`}
        onClick={handleClick('1-5')}
      >
        1-5
      </button>
      <button
        className={`${active === '6-9' ? 'is-active' : ''}`}
        onClick={handleClick('6-9')}
      >
        6-9
      </button>
    </div>
  );
}

如何使用 UseState 在 React 中操作按钮集？

How to Manipulate Sets of Buttons in React with UseStates?

javascript

reactjs

use-state