React组件状态同步问题求助：TextEditor-Toolbar-PickColorBox

我来帮你拆解当前遇到的问题，并一步步给出修复方案：

问题根源分析 #

你的代码主要存在三个核心问题：

1. ModalHandler类的语法与逻辑错误：ES6类中不能用let直接声明实例属性，且你的toogleShowComponent方法只返回反转值，并未实际更新类的状态，导致状态永远无法正确切换。
2. Toolbar组件的语法错误：render中的button标签缺少<button开头和onClick属性，这会导致React渲染异常，触发组件反复卸载再挂载，进而反复调用constructor重置state。
3. 冗余的状态管理：其实Toolbar本身完全可以独立维护弹窗状态，额外的ModalHandler类反而增加了复杂度（当然如果需要跨组件复用状态逻辑，我们也可以正确实现它）。

方案1：修正ModalHandler类并修复Toolbar #

如果你坚持要用ModalHandler来管理状态，先修正这个类的实现：

修正后的ModalHandler类 #

export default class ModalHandler {
  // 使用类字段声明实例属性，这是ES6+的标准写法
  boolShowComponent = false;

  // 注意拼写是toggle（不是toogle）
  toggleShowComponent = () => {
    // 必须更新实例的属性，才能真正维护状态
    this.boolShowComponent = !this.boolShowComponent;
    return this.boolShowComponent;
  };

  // 新增方法获取当前状态，方便组件初始化时同步
  getCurrentState = () => {
    return this.boolShowComponent;
  };
}

修复后的Toolbar组件 #

export default class Toolbar extends React.Component {
  constructor(props) {
    super(props);
    // 从ModalHandler同步初始状态
    this.state = {
      showPickColorBox: this.props.modalHandler.getCurrentState()
    };
  }

  // 使用箭头函数自动绑定this，避免render中重复bind
  _onPickColorClick = () => {
    const newState = this.props.modalHandler.toggleShowComponent();
    this.setState({ showPickColorBox: newState });
  };

  render() {
    return (
      <div className={'ToolbarEditor'}>
        {/* 修复button标签的语法错误，添加onClick绑定 */}
        <button onClick={this._onPickColorClick}>PickColor</button>
        {this.state.showPickColorBox ? (
          <PickColorBox
            editorState={this.props.editorState}
            onChange={this.props.onChange}
          />
        ) : null}
      </div>
    );
  }
}

方案2：移除冗余的ModalHandler，简化状态管理 #

其实Toolbar完全可以自己维护弹窗状态，这种方式更符合React组件的设计习惯，代码更简洁：

export default class Toolbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showPickColorBox: false
    };
  }

  _onPickColorClick = () => {
    // 使用函数式setState确保获取最新的前序状态
    this.setState(prevState => ({
      showPickColorBox: !prevState.showPickColorBox
    }));
  };

  render() {
    return (
      <div className={'ToolbarEditor'}>
        <button onClick={this._onPickColorClick}>PickColor</button>
        {this.state.showPickColorBox ? (
          <PickColorBox
            editorState={this.props.editorState}
            onChange={this.props.onChange}
          />
        ) : null}
      </div>
    );
  }
}

这种写法下，你需要移除TextEditor中关于modalHandler的所有代码，直接传递必要的props给Toolbar即可。

为什么原代码会反复调用constructor？ #

原Toolbar的render方法中button标签存在语法错误（缺少<button和onClick），导致React渲染失败，进而触发组件的卸载与重新挂载。每次挂载都会执行constructor，将showPickColorBox重置为false，这就是你看到状态无法保持的核心原因。

内容的提问来源于stack exchange，提问作者Pedro Gabriel Lima