如何处理与UseStates反应的按钮集？

Question

嗨，我是新的反应，尝试着让按钮在你按下的时候亮起来，但是它们在一组按钮和中，我希望其他的按钮也不要在一个按钮被按下时也亮起来。。

目前，我使用的是UseState()，它只需打开和关闭所有按钮。

​

  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

您只需要存储一个可以在状态中使用的值(我使用了'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>
  );
}

Answer 2

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

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 3

我建议给您的按钮一个值，并将其传递给您的处理程序。

并将值赋值给票证，而不是使票证成为布尔值。

所以,

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>