如何使用ReactJS调用由childda事件引起的childdb方法

How to call a method of childB caused by an event in ChildA using ReactJS

本文关键字：childdb 方法 事件 childda 何使用 ReactJS 调用      更新时间：2023-09-26

我正在使用React为我的项目和相当新的使用它。下面是我面临的问题。

我有以下组件结构:

<Parent>
  <ChildA></ChildA>
  <ChildB></ChildB>
</Parent>

我想有以下功能:当一个按钮被点击在儿童a，我想要一个方法在儿童db执行。

你能让我知道我们如何在ReactJS中实现这一点吗?

提前感谢!

这个问题有两个直接的答案。

  1. 使用事件发射器。在childda的点击处理程序中，你发出一个"whatever"事件。child db已经为"whatever"事件注册了一个监听器，因此调用该事件的处理程序。

  2. 参用。您将一个函数作为prop <ChildA onWhatever={fn}>传递给childda，并将ref放在childdb <ChildB ref="b">上，然后在传递给childda的函数中执行this.refs.b.method()。

然而，这是XY问题的一个例子。真正好的解决方案可能在于你退一步思考"当按钮被点击时，应该发生什么可观察的变化?"而不是"应该调用什么方法?"

父组件应该包含:

handleClickA: function(){
    this.refs.b.AClicked()
},
render: function(){
    return <div>
        <ChildA onClick={this.handleClickA}></ChildA>
        <ChildB ref='b'></ChildB>
    </div>
}
相关文章：