React 将事件传递给子组件

Question

我正在尝试找到一种将事件传递给子组件的方法。 我有类似的东西：

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 标签，当点击标签时，这些标签会变为输入（或在其他情况下变为文本区域或 MD 编辑器）。

用户进入时子组件中有一个内部状态 进入标签的“编辑模式”。每个组件可以有几个 这个可编辑标签。

产品请求是当用户单击页面中的任何位置时，标签应退出编辑模式，因此我需要像示例中那样捕获主 div 上的 onClick 并以某种方式将事件传递给活动的函数子组件，因此它将更新其内部状态以退出编辑模式（如果有）。

现在，我认为的解决方案是在父组件中创建一个状态变量，该变量将由onPageClick 函数更改并传递给子组件 这样他们就可以更新本地状态。然后再次在父级上重置它。

类似：

onPageClick() {
   this.setState({ pageClicked: true }, () => {
      this.setState({ pageClicked: false }
   });
}

...
<ChildComponent pageClicked={this.state.pageClicked}/>

但即使没有必要，每次点击它也会改变父状态两次（因此也会改变子状态）。理想的原因是为什么我会找到一种方法将一些事件委托传递给子级，这样当父级 onClick 被触发而父级没有任何状态更改时，一个函数只会在子级内部触发。

这可能吗？有人知道如何实现这样的东西吗？

Answer 1

你让你的问题变得比它需要的复杂得多。 您不应该监听外部组件的点击。 相反，您应该使用文本输入的onBlur 事件。 onBlur 事件在文本输入失去焦点时触发。