单击 <div> 中的 <button> 时如何禁用单击 <div>

Question

我正在将 ReactJS 与 React-Bootstrap 一起使用并呈现以下内容：

<div onClick={this.openModal.bind(this)} className="container">
  <div className="content">
    <div className="list">
      ...
    </div>
    <Button onClick={this.deleteContent.bind(this)} 
      className="delete-content">X
    </Button>
    <Modal show={this.state.showModal} 
      onHide={this.closeModal.bind(this)}
      className="edit-content">
      ...
      <Button onClick={this.closeModal.bind(this)}
        className="close-modal">X
      </Button>
    </Modal>
  </div>
<div>

在 <div className="content"> 中，我正在渲染一组组件，当您单击 <div className="Container"> 时，它会打开 Modal，因此您可以编辑容器的内容。 <div className="container">里面有一个按钮可以把容器全部删除，因为很多容器都会迭代渲染。

我正在控制 Modal 是否与组件的 state 一起打开，其中 this.openModal() 和 this.closeModal() 只是切换一个布尔值来确定是否应显示模式(this.state.showModal).

我的问题是：当我在容器中点击带有className="delete-content"的Button时，它也注册了一个打开Modal的点击，因为<div className="container">有一个onClick 属性。因此，当我删除容器时，应用程序会卡住，认为 Modal 已打开，即使它没有打开。

我第一个解决这个问题的想法是将 onClick 属性从 <div className="container"> 移动到 <div className="list">，但我想要所有 space 周围 <Button className="delete-content"> 可点击，如果我将其移动到 list 它将限制可点击区域。

是否可以通过点击delete-content Button暂时禁用<div className="container">的onClick 属性来实现？或任何其他 ideas/fixes?

Answer 1

这是因为事件对象上的 event propagation. To fix the problem you need to use stopPropagation。

handleDelete(event) {
  event.stopPropagation()
  this.deleteContent()
}

<Button
  onClick={this.handleDelete.bind(this)}
  className="delete-content">X
</Button>

单击 <div> 中的 <button> 时如何禁用单击 <div>

How to disable click on <div> when <button> in <div> is clicked

html

reactjs

react-bootstrap