javascript - 调度和监听不同组件中的事件 - reactjs

Question

我正在尝试在一个组件中创建一个自定义事件并在另一个组件中添加一个事件监听器。监听事件的组件包含一个我想在事件上执行的函数。以下是我在这两个组件中的内容，我只是觉得我正在以错误的方式解决这个问题......

组件 #1

toggleWidget() {
   const event = new CustomEvent('sliderClicked', {
     bubbles: true,
   });
   const sliderToggle = document.getElementById('input');
   sliderToggle.dispatchEvent(event);

   this.setState({
     checked: !this.state.checked,
   });
}
  /* and then in my render... */

 render() {
   const displaySlider = this.state.isSliderDisplayed ? (
     <div className="slider-container" >
    <label className="switch" htmlFor="input">
      <input type="checkbox" checked={this.state.checked} onChange={this.toggleWidget} id="input" />
      <span className="slider round" />
    </label>
    <p className="batch-slider-title"> Batch Widget </p>
  </div>) : null;`

组件二

window.addEventListener('sliderClicked', this.refreshLayout);`

关于我可能做错了什么有什么想法吗？

Answer 1

基本上它应该可以工作，但是在 react 中 - 如果您在组件中渲染了一个元素，您可以使用 ref 来访问它:

<input
    type="checkbox"
    checked={this.state.checked}
    onChange={this.toggleWidget}
    id="input"
    ref={(c) => this.input = c}
/>

你的 toggleWidget 函数应该是这样的:

toggleWidget() {
    ...
    this.input.dispatchEvent(event);
    ...
}