Question

我在React中有一个模态。单击模态的背景时，模态应关闭。我现在设置的方式，如果您在*模态内部单击，它也会关闭。因为模态位于背景中

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">
             ....

当我单击Container时，将调用Background的onClick事件。我不希望这种情况发生。这是用户将一直单击的一种形式。我只需要在背景上的模态之外单击时关闭模态。

Answer 1

我认为，如果您在stopPropagation点击事件而不是Container上使用Background，它将起作用。只需确保在onClick组件中使用Container道具即可。

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>
    );
  }
}

Answer 2

编辑：在重读问题时，在这种情况下，the other answer是一个更简单的解决方案。

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

一般的想法是在HOC中在文档上注册单击事件处理程序，并通过event.target浏览器功能检查ref是否起源于React Element.contains内部。如果为is，则处理程序将不会执行。

[0] https://github.com/tj/react-click-outside

[1] https://github.com/tj/react-click-outside/blob/master/index.js

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

2 个答案: