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

我想在一个组件中创建一个自定义事件，并在另一个组件中添加一个事件侦听器。正在侦听事件的组件包含一个我想要在事件上执行的函数。以下是我已经在两个组成部分，我只是觉得我在错误的方式去这个...调度和侦听不同组件中的事件 - reactjs

组件＃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);`

任何想法，我可能做错了什么？

来源

2017-08-22 Bobby Tables

基本上它应该工作，但在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); 
    ... 
}

来源

2017-08-22 19:07:38 Dekel

谢谢！所以，我会保持addEventListener，因为它是在组件二？ –

如果他们根本不相关，答案是肯定的。如果他们是相关的 - 你应该使用道具来传递事件（通过@jonahe检查答案是一个例子）。这真的取决于你想做什么。 – Dekel

是的，它们根本就没有关系，我只是希望该组件监听事件并在事件上触发refreshLayout（）函数，并且无论出于何种原因，即使更改它仍然无效（* sigh *）。感谢您的时间！！ –

在反应中，将回调从父项传递给子项是很常见的。

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)

来源

2017-08-22 19:12:38 jonahe

Refs通常被认为是在React中避免的，因为它们将组件结合在一起。看到这里的文档： https://facebook.github.io/react/docs/refs-and-the-dom.html

你的第一个倾向可能是使用裁判为“使事情发生”，在您的应用程序。如果是这种情况，请花一点时间，更仔细地考虑组件层次结构中应该拥有哪些状态。通常情况下，很显然，“拥有”该州的适当位置在层次结构中处于较高水平。有关这方面的示例，请参阅提升状态指南。

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

来源

2017-08-22 21:57:01

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

回答

相关问题