React双按钮切换组件开发疑问：disabled状态管理逻辑如何设计？

嘿，这个需求其实挺典型的，咱们来聊聊两种实现思路，你可以根据自己的场景选～

方案一：用单个状态（推荐，适合固定两个按钮的场景） #

其实完全不需要两个状态，用一个布尔值就够了——因为两个按钮的禁用状态是互斥的：一个禁用时另一个必然可用，反过来也一样。

比如我们定义状态isLeftButtonDisabled，那右边按钮的disabled属性就是这个值的取反!this.state.isLeftButtonDisabled。这样状态更简洁，逻辑也一目了然。

完整代码示例：

class ToggleButtons extends React.Component {
  constructor(props) {
    super(props);
    // 初始状态：左边按钮可用，右边按钮禁用（或者反过来，看你需求）
    this.state = { isLeftButtonDisabled: false };
    // 提前绑定事件，避免每次render重新绑定
    this.handleLeftClick = this.handleLeftClick.bind(this);
    this.handleRightClick = this.handleRightClick.bind(this);
  }

  handleLeftClick() {
    // 点击左边按钮后，禁用左边，启用右边
    this.setState({ isLeftButtonDisabled: true });
  }

  handleRightClick() {
    // 点击右边按钮后，禁用右边，启用左边
    this.setState({ isLeftButtonDisabled: false });
  }

  render() {
    return (
      <div>
        <button 
          disabled={this.state.isLeftButtonDisabled}
          onClick={this.handleLeftClick}
        >
          按钮A
        </button>
        <button 
          disabled={!this.state.isLeftButtonDisabled}
          onClick={this.handleRightClick}
        >
          按钮B
        </button>
      </div>
    );
  }
}

方案二：用两个独立状态（适合未来可能扩展更多按钮的场景） #

如果以后你的组件可能增加更多按钮，或者需要更灵活的状态控制，也可以用两个独立的状态变量，比如button1Disabled和button2Disabled。这种方式的逻辑更直白，但状态会稍微冗余一点。

代码示例：

class ToggleButtons extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      button1Disabled: false,
      button2Disabled: true 
    };
    this.handleButton1Click = this.handleButton1Click.bind(this);
    this.handleButton2Click = this.handleButton2Click.bind(this);
  }

  handleButton1Click() {
    this.setState({
      button1Disabled: true,
      button2Disabled: false
    });
  }

  handleButton2Click() {
    this.setState({
      button1Disabled: false,
      button2Disabled: true
    });
  }

  render() {
    return (
      <div>
        <button 
          disabled={this.state.button1Disabled}
          onClick={this.handleButton1Click}
        >
          按钮A
        </button>
        <button 
          disabled={this.state.button2Disabled}
          onClick={this.handleButton2Click}
        >
          按钮B
        </button>
      </div>
    );
  }
}

小提醒 #

你原来的代码里把onClick绑在了外层div上，这样点击div的任何地方都会触发事件，这显然不是你想要的——应该把点击事件分别绑定在每个按钮上，这样只有点击按钮时才会触发状态切换哦～

内容的提问来源于stack exchange，提问作者blankface