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

Question

我在沙盒中重新创建了单选按钮行为。当一个按钮处于事件状态时，所有其他按钮都应处于非事件状态。

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

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

谢谢

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>
  );
}

CodeSandbox:https://codesandbox.io/s/jolly-haibt-73df1