如何为卡片方法中的每个按钮分隔状态？

2024-03-09 15:48:42

为卡片方法中的每个按钮分隔状态

引言

在构建基于 React 的应用程序时，一个常见的挑战是如何为组件中的多个按钮维护独立的状态。当单击一个按钮时，其他按钮的状态也随之改变，这可能不是预期的行为。本文将深入探讨这个问题，并提供三种解决方案，以便你为每个按钮维护独立的状态，从而创建更灵活且可维护的应用程序。

问题概述

在使用卡片方法时，每个按钮都包含自己的状态，当用户与按钮交互时，该状态就会发生改变。但是，如果多个按钮共享相同的父组件，那么当单击一个按钮时，所有按钮的状态都会更新。这种行为通常是不期望的，因为它会导致不可预测和混乱的交互。

解决方案

有三种主要方法可以为卡片方法中的每个按钮维护独立的状态：

使用状态管理库

状态管理库，如 Redux 或 MobX，将按钮的状态与组件的其他部分分离开来。它允许集中管理和更新状态，而不会影响组件的其余部分。使用状态管理库的优点包括：

集中式状态管理： 它提供了一个集中位置来管理所有应用程序状态，从而提高代码的可读性和可维护性。
可预测的状态更新： 它遵循严格的规则来更新状态，确保状态变化的可预测性和一致性。
隔离组件： 它将组件与具体的状态实现隔离，使组件更易于重用和测试。

使用局部状态

局部状态是一种更简单的解决方案，涉及在每个按钮的处理函数中维护和更新自己的状态。局部状态的优点包括：

简单性： 它很容易实施，并且不需要外部库或复杂的设置。
适合小型应用程序： 它对于规模相对较小的应用程序非常有用，因为状态管理的开销很低。
组件隔离： 它将每个按钮的状态与其他按钮隔离，从而防止意外的状态更改。

使用 ref

ref允许访问 DOM 元素，然后可以使用元素的状态来跟踪按钮的状态。ref通常与局部状态结合使用，优点包括：

直接 DOM 操作： 它允许直接操作 DOM 元素，从而提供对按钮状态的更精细控制。
跨组件通信： 它可以在不同组件之间传递状态，使状态共享更灵活。
自定义交互： 它使你能够创建自定义交互，超出了状态管理库的标准功能。

代码示例

使用 Redux

const mapStateToProps = (state) => {
  return {
    buttons: state.buttons,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    toggleButton: (buttonId) => dispatch({ type: 'TOGGLE_BUTTON', buttonId }),
  };
};

const MyComponent = (props) => {
  const { buttons, toggleButton } = props;

  return (
    <div>
      {buttons.map((button) => (
        <button
          key={button.id}
          onClick={() => toggleButton(button.id)}
        >
          {button.label}
        </button>
      ))}
    </div>
  );
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

使用局部状态

const MyComponent = () => {
  const [buttons, setButtons] = useState([
    { id: 1, label: 'Button 1', active: false },
    { id: 2, label: 'Button 2', active: false },
    { id: 3, label: 'Button 3', active: false },
  ]);

  const handleButtonClick = (buttonId) => {
    const updatedButtons = buttons.map((button) => {
      if (button.id === buttonId) {
        return { ...button, active: !button.active };
      }

      return button;
    });

    setButtons(updatedButtons);
  };

  return (
    <div>
      {buttons.map((button) => (
        <button
          key={button.id}
          onClick={() => handleButtonClick(button.id)}
        >
          {button.label}
        </button>
      ))}
    </div>
  );
};

使用 ref

const MyComponent = () => {
  const buttonRefs = useRef([]);

  const handleButtonClick = (buttonId) => {
    const button = buttonRefs.current[buttonId];
    button.classList.toggle('active');
  };

  return (
    <div>
      {buttons.map((button, index) => (
        <button
          key={button.id}
          ref={(ref) => (buttonRefs.current[index] = ref)}
          onClick={() => handleButtonClick(index)}
        >
          {button.label}
        </button>
      ))}
    </div>
  );
};

结论

通过使用本文中概述的解决方案，你可以为卡片方法中的每个按钮维护独立的状态，从而创建更加健壮和可维护的应用程序。根据你的具体要求和应用程序的复杂性，选择最适合你的解决方案。

常见问题解答

为什么为按钮维护独立状态很重要？
维护独立状态可防止意外的状态更改，确保按钮在用户交互时以预期的方式工作。
何时应该使用 Redux 而何时应该使用局部状态？
如果应用程序很大并且有复杂的状态管理需求，则 Redux 是更好的选择。对于较小的应用程序，局部状态就足够了。
ref 如何与按钮状态分离？
ref 允许直接访问 DOM 元素，这些元素具有自己的状态，与应用程序状态分开。
哪种方法更适合于组件测试？
使用状态管理库进行组件测试更容易，因为它提供了集中式状态管理和可预测的状态更新。
使用这些技术有哪些潜在的缺点？
使用状态管理库可能会增加应用程序的复杂性，而使用局部状态可能会导致难以维护的大型代码库。