Html 如何禁用单击<；部门>；何时<；按钮>；在<；部门>；点击

我将ReactJS与React引导一起使用，并呈现以下内容：

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

...
X
...
X

在

中，我正在渲染一组组件，当您单击

时，它将打开，以便您可以编辑容器的内容。有一个按钮可以一起删除容器，该按钮位于

中，因为许多容器将以迭代方式呈现

我正在控制组件的

状态是否打开
模式
，其中
this.openModal（）
和
this.closeModal（）
只需切换一个布尔值，确定是否应显示模式（
this.state.showModal
）

我的问题是：当我在容器中单击带有
className=“delete content”
的
按钮时，它也会注册一次单击以打开
模式
，因为
有一个
onClick
属性。因此，当我删除容器时，应用程序会认为
Modal
是打开的，即使它没有打开

我解决这一问题的第一个想法是将
onClick
属性从
移动到
，但我希望
周围的所有空间都是可单击的，如果我将其移动到
列表
，则会限制可单击区域

当单击
删除内容
按钮来临时禁用
的
onClick
属性时，是否可以以某种方式实现？或者任何其他想法/解决方案？
这是因为。要解决此问题，需要在事件对象上使用

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

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

handleDelete（事件）{
event.stopPropagation（）
这个文件名为deleteContent（）
}
X
您尝试过event.preventDefault（）吗？