javascript - React useState 切换单个按钮

Question

我的 react 组件中有多个按钮，这些按钮允许我根据我单击的按钮显示或隐藏一些数据。我有一个切换动画，它将设置两种不同的图标状态(显示和隐藏)

设置状态

以下是我设置状态的方法:const [clicked, setClicked] = useState(false);

处理点击

切换点击事件的函数

  const handleClick = () => {
    setClicked(s => !s);
  };

按钮切换

          <Button className={style.selector} onClick={handleClick}>
            {clicked ? (
              <img src={off} alt="hidden" />
            ) : (
              <img src={on} alt="visible" />
            )}
            {
              <FormattedMessage
                id="side_properties"
                defaultMessage={"BUTTON 1"}
              />
            }
          </Button>

      // other buttons below with the same format.

切换图标功能有效，但是当单击单个按钮时，所有其余按钮上的图标都会发生变化。如何将此点击事件限制为单个按钮？

Answer 1

您应该跟踪数组中每个按钮的状态并单独更新每个按钮。

这是一个可能的解决方案:

function MyComponent() {
  const initialState = Array.from({ length: 4 }).map((_, idx) => {
    return { id: idx + 1, clicked: false };
  });
  const [buttons, setButtons] = React.useState(initialState);

  function handleButtonClick(buttonId) {
    const nextState = buttons.map(button => {
      if (button.id !== buttonId) {
        return button;
      }
      return { ...button, clicked: !button.clicked };
    });
    setButtons(nextState);
  }

  return (
    <div>
      {buttons.map(button => (
        <button
          key={button.id}
          type="button"
          onClick={() => handleButtonClick(button.id)}
        >
          [{button.id}] {button.clicked ? "Clicked" : "Not clicked"}
        </button>
      ))}
    </div>
  );
}

如果您想查看，这里有一个工作示例:

• CodeSandbox