javascript - React 如何通过组件跟踪事件

Question

我需要关于如何在 Reactjs 中解决以下问题的想法:

• 文本编辑器 -> 工具栏 -> PickColorBox

我有上面列出的组件的关系(父 -> 子)。

问题:组件 Toolbar 的状态 showPickColorBox: false 表示组件 PickColorBox 是否可见。此状态由按钮的单击事件触发。我需要的是按钮能够将 bool 值切换到正确的状态，也就是说，如果组件可见，则为 true，否则为 false。但是每次触发按钮事件时，都会调用工具栏的构造函数并将状态 showPickColorBox 设置为 false，即使 PickColorBox 组件可见也是如此。

我的解决方案:我需要跟踪组件 PickColorBox 是否可见，以将状态设置为正确的值。在阅读一些代码时，我看到了在根组件中实例化一个类以持续跟踪事件的示例。我尝试重现该示例，但它没有用，我无法将类中的函数作为 props 传递。我什至不确定是否可以在 javascript 中实例化一个类，所以我需要一些指导。

任何关于如何解决的帮助，任何其他解决方案都非常感谢!

我更改了下面的代码以简化，所以代码中的拼写错误不是问题，除非是关于实例化的类以及如何做到这一点。另一件事，只是为了澄清代码，我正在使用 Draftjs组件 Editor、状态 EditorState 和 onChange 是继承的框架。

根组件

export default class TextEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    };
    this.onChange = (editorState) => this.setState({editorState});
    this.modalHandler = new ModalHandler();
  }

  render() {
    const {editorState} = this.state;

    return (
      <div className={'editor-root'} >
        <div className={'editor-toolbar'}>
          <Toolbar
            editorState={editorState}
            onChange={this.onChange}
            modalHandler={this.modalHandler}
          />
        </div>
        <div className={'editor-textarea'} >
          <Editor
            editorState={editorState}
            onChange={this.onChange}
          />
        </div>
      </div>
    );
  }
}

ModalHandler 类

export default class ModalHandler {
  let boolShowComponent = false;

  toogleShowComponent = (): boolean => {
    return !boolShowComponent;
  };
}

工具栏组件

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

  _onPickColorClick() {
    let bool = this.props.modalHandler.toogleShowComponent()
    this.setState({
      showPickColorBox: bool,
    });
  }

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

Answer 1

与其使用 showPickColorBox 处理工具栏，不如尝试在 TextEditor 中定义相同的工具栏并将其作为 Prop 传递。现在，要更新 showPickColorBox，请在 TextEditor 中定义一个方法并将其作为 Prop 传递。

export default class TextEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
      //define here
      showPickColorBox: false

    };
    this.onChange = (editorState) => this.setState({editorState});


    this.modalHandler = new ModalHandler();
  }
  //definehere
  _onPickColorClick(bool) {

    this.setState({
      showPickColorBox: bool,
    });
  }

  render() {
    const {editorState} = this.state;

    return (

      <div className={'editor-root'} >
        <div className={'editor-toolbar'}>
          <Toolbar
            editorState={editorState}
            onChange={this.onChange}
            modalHandler={this.modalHandler}
            //pass here
            _onPickColorClick={this._onPickColorClick}
          />
        </div>
        <div className={'editor-textarea'} >
          <Editor
            editorState={editorState}
            onChange={this.onChange}
          />
        </div>
      </div>
    );
  }
}

现在从工具栏调用:

export default class Toolbar extends React.Component {
  constructor(props) {
    super(props);

  }

  _onPickColorClick() {
    let bool = this.props.modalHandler.toogleShowComponent();
    //use here
    this.props._onPickColorClick(bool);
  }

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