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);
    ...
}

Answer 2

在React中，将回调从父级传递给子级是很常见的。

const Child = ({handleClick}) => (
  <div onClick={ handleClick } >Click me!</div>
);

const Parent = () => {
  const childClickHandler = event => {
    // do stuff
    alert('My child is calling?');
  }

  return (
    <Child handleClick={ childClickHandler }/>
  );
};

也许这对你有用吗？ You can try the code here. (JSFiddle)

Answer 3

Refs通常被认为是React中要避免的，因为它们将组件耦合在一起。请参阅此处的文档： https://facebook.github.io/react/docs/refs-and-the-dom.html

您的第一个倾向可能是在您的应用中使用refs“让事情发生”。如果是这种情况，请花一点时间，更关键地考虑组件层次结构中应该拥有状态的位置。通常，很明显，“拥有”该状态的适当位置在层次结构中处于更高级别。有关此示例，请参阅Lifting State Up指南。

尝试使用像redux这样的全局状态容器，当你在一个组件中使用“toggleWidget”时，在redux商店中设置一个属性。通过在第二个组件（要响应更改/切换的组件）中将其设置为道具来收听该属性。在更改该属性时，您的组件将调用“componentWillReceiveProps”生命周期方法，然后您可以让“响应”组件采取您喜欢的任何操作。

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

3 个答案: