Question

我目前在父div的中间有一个父div和一个子div。我希望仅在子div外部单击时才能关闭父div。我将如何去做呢？目前，我的代码设置如下，使用triggerParentUpdate将true或false设置为显示div。

<div onClick={this.props.triggerParentUpdate} className="signupModalContainer">
    <div className="embed-responsive embed-responsive-16by9">
        <form action="action_page.php">
            <div className="container">
            <button onClick={this.props.triggerParentUpdate} type="button" className="closebtn">X</button>                             
            </div>
        </form> 
    </div>
</div>

第一个div中的onclick函数（className =“ signupModalContainer”）使之单击，以便当我单击该div或任何子div时，所有div都关闭。如果我删除该onclick函数，则div通过closebtn关闭。

谢谢！

Answer 1

为子div的onClick事件处理程序创建一个处理程序，该处理程序停止了事件向父级事件的传播/冒泡。

有关更多信息，请参考Event.stopPropagation方法。

class SomeComponent extends Component {
  handleCloseButton = e => {
    // This stops the event from bubbling up.
    // So it won't trigger the parent div's "onClick" to fire.
    e.stopPropagation();
    this.props.triggerParentUpdate(e);
  }

  render () {
    // ...
    return (
      <div onClick={this.props.triggerParentUpdate} className="signupModalContainer">
          <div className="embed-responsive embed-responsive-16by9">
              <form action="action_page.php">
                  <div className="container">
                  <button onClick={this.handleCloseButton} type="button" className="closebtn">X</button>                             
                  </div>
              </form> 
          </div>
      </div>
    );
  }
)

在子div外部单击时隐藏Div onClick。 ReactJS

1 个答案: