停止单击父级上的子级调用方法-React/JavaScript

我有一个情态动词。单击模态的背景时，模态应关闭。按照我现在设置的方式，如果你在模式中单击，它也会关闭。因为模态在背景中>

handleClose(e) {
    e.stopPropagation(); 
    this.props.history.push('/business/dashboard') 
  }

  render() {
    return (
      <Background onClick={e => this.handleClose(e)} name="BACKGROUND">
        <Container onClick={console.log("IT CLICKED")} to={'/business/dashboard'} name="CONTAINER">
             ....

handleClose（e）{
e、 停止传播（）；
this.props.history.push（“/business/dashboard”）
}
render（）{
返回(
this.handleClose（e）}name=“BACKGROUND”>
....

---

当我单击容器时，后台的onClick事件将被调用。我不希望发生这种情况。这是一个用户将一直单击的表单。我需要仅当您在后台的模式之外单击时，模式才会关闭。

编辑：在重读问题时，这是一个更简单的解决方案

您想要实现的行为通常被称为“外部单击”处理程序。有几个不错的库可以处理这个[0]，如果您想详细了解它的工作原理，它们的源代码非常简短易读。[1]

一般的想法是在HOC中的文档上注册一个点击事件处理程序，并通过

元素检查
事件.target
是否起源于React
ref
。包含
浏览器功能。如果是，则不执行处理程序

[0]

[1] 
编辑：重读问题时，这是一个更简单的解决方案

您想要实现的行为通常被称为“外部单击”处理程序。有几个不错的库可以处理这个[0]，如果您想详细了解它的工作原理，它们的源代码非常简短易读。[1]

一般的想法是在HOC中的文档上注册一个点击事件处理程序，并通过
元素检查
事件.target
是否起源于React
ref
。包含
浏览器功能。如果是，则不执行处理程序

[0]

[1] 
我认为如果您在
容器
单击事件上使用
停止播放
而不是
背景
，它会起作用。只需确保在
容器
组件中使用
onClick
属性即可

class App extends React.Component {
  handleClose = (e) => {
    e.stopPropagation();
    this.props.history.push("/business/dashboard");
  };

  render() {
    return (
      <Background onClick={this.handleClose} name="BACKGROUND">
        <Container
          onClick={e => e.stopPropagation()}
          to={"/business/dashboard"}
          name="CONTAINER"
        />
      </Background>
    );
  }
}

类应用程序扩展了React.Component{
handleClose=（e）=>{
e、 停止传播（）；
this.props.history.push（“/business/dashboard”）；
};
render（）{
返回(
e、 stopPropagation（）}
to={“/业务/仪表板”}
name=“容器”
/>
);
}
}
如果您在
容器
单击事件上使用
停止播放
而不是
背景
，我认为它会起作用。只需确保在
容器
组件中使用
onClick
属性即可

class App extends React.Component {
  handleClose = (e) => {
    e.stopPropagation();
    this.props.history.push("/business/dashboard");
  };

  render() {
    return (
      <Background onClick={this.handleClose} name="BACKGROUND">
        <Container
          onClick={e => e.stopPropagation()}
          to={"/business/dashboard"}
          name="CONTAINER"
        />
      </Background>
    );
  }
}

类应用程序扩展了React.Component{
handleClose=（e）=>{
e、 停止传播（）；
this.props.history.push（“/business/dashboard”）；
};
render（）{
返回(
e、 stopPropagation（）}
to={“/业务/仪表板”}
name=“容器”
/>
);
}
}
虽然您可以使用类似的方法，但最简单的解决方案是为您的模式提供一个onClick处理程序，该处理程序只会阻止事件传播。虽然您可以使用类似的方法，但最简单的解决方案是为您的模式提供一个onClick处理程序，该处理程序只会阻止事件传播。