javascript - 在 ReactJS 中重新创建单选按钮行为

Question

我在 Sandbox 中重新创建了单选按钮行为。当一个按钮处于活动状态时，所有其他按钮都应该处于非活动状态。

请在此处找到链接： https ://codesandbox.io/s/amazing-chaplygin-xf8el?fontsize=14

对于 3 个按钮，我创建了 3 个功能。有没有办法用 1 个函数优化我的代码？

谢谢

标签： javascriptreactjs

Answer 1

是的，您可以通过使用数组来做到这一点：

import React, { useState } from "react";

export default function ButtonToggle() {
  const [happy, setHappy] = useState([false, false, false]);

  function handle(idx) {
    let set = [false, false, false];
    set[idx] = !happy[idx];
    setHappy(set);
  }

  return (
    <div>
      {happy[0] ? "" : ""}
      <button
        onClick={() => {
          handle(0);
        }}
      >
        bouton1
      </button>
      {happy[1] ? "" : ""}
      <button
        onClick={() => {
          handle(1);
        }}
      >
        bouton2
      </button>
      {happy[2] ? "" : ""}
      <button
        onClick={() => {
          handle(2);
        }}
      >
        bouton3
      </button>
    </div>
  );
}

代码沙盒： https ://codesandbox.io/s/jolly-haibt-73df1