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()只是切换一个布尔值，用于确定是否应显示模态（{ {1}}）。

我的问题是：当我点击容器中的this.state.showModal Button时，它还会注册一次点击以打开className="delete-content"，因为Modal有<div className="container"> 1}}属性。因此，当我删除容器时，应用程序会因为onClick已打开而陷入困境，即使它不是。

我首先要解决的问题是将Modal属性从onClick移到<div className="container">，但我希望<div className="list">周围的所有空间都是可点击，如果我将其移至<Button className="delete-content">，则会限制可点击区域。

单击list delete-content以暂时禁用Button的{{1}}属性时，是否可以以某种方式实现？或任何其他想法/修复？

Answer 1

这是因为event propagation。要解决此问题，您需要在事件对象上使用stopPropagation。

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

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

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

1 个答案: