我正在尝试找到一种方法将事件传递给反应中的子组件。我有这样的事情：
class ParentComponent extends Component<IProps, IState> {
render() {
return (
<div className={"ParentComponent"} onClick={this.onPageClick}>
... some navbar ...
... some `tabs` component
...
<ChildComponent/>
<AnotherChildComponent/>
...
... some footer ...
</div>
)
}
}
子组件实际上是子页面（使用选项卡更改），其中包含大量逻辑和数据。（所以我更喜欢在单独的组件中管理它们而不是一个巨大的页面）。
一些内部组件具有Editable标签，当单击标签时，这些标签会更改为输入（或在其他情况下更改为 textarea 或 MD 编辑器）。
当用户进入标签的“编辑模式”时，子组件中有一个内部状态。每个组件都可以有几个这样的可编辑标签。
产品请求是当用户单击页面中的任意位置时，标签应退出编辑模式，因此我需要像示例中一样捕获主 div 上的 onClick，并以某种方式将事件传递到活动子组件中的函数中它将更新它的内部状态以退出编辑模式（如果有）。
现在，我认为的解决方案是在父组件中创建一个状态变量，该变量将被onPageClick函数更改并传递给子组件，以便它们可以更新本地状态。然后再次在父级上重置它。
就像是：
onPageClick() {
this.setState({ pageClicked: true }, () => {
this.setState({ pageClicked: false }
});
}
...
<ChildComponent pageClicked={this.state.pageClicked}/>
但即使不是必需的，它也会在每次点击时更改父状态两次（因此也会更改子状态）。如果我找到一种方法将一些事件委托传递给子级，那么当父级 onClick 被触发而父级中没有任何状态更改时，函数只会在子级内部触发，这是理想的原因。
有可能吗？有没有人知道如何实现这样的东西？
你让你的问题变得比它需要的更复杂。您不应该监听外部组件上的点击。相反，您应该使用文本输入的onBlur事件。onBlur每当文本输入失去焦点时触发事件。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句