使用转义键关闭反应引导模式

Question

我有6个按钮，当点击时，激活一个模态。这是用React编写的。

//Since I have 6 different modals, giving each of them an id would distinguish them
onCloseModal(id) {
    this.setState({
        open: false,
        modalShown: id
    })
}

render() {
    return (
        <Modal onHide={this.onCloseModal.bind(this, item.id)} keyboard={true}>
            <Modal.Header closeButton={true} onHide={this.onCloseModal.bind(this)}>
            </Modal.Header>
        </Modal>
    )
}

我有keyboard={true}，根据https://react-bootstrap.github.io/components.html#modals-props的文档，按Esc键会退出模态。但它并没有起作用。我相信我已经设置了所有内容，因为我的每个按钮都有一个唯一的ID - 为什么不能使用转义键来响应？

这是一个行动模式的图像。

Answer 1

您的组件状态似乎没有正确表示模态的状态。我写了an example（可能不是最佳做法？），它显示了如何以更明确的方式处理状态。

onCloseModal() {
  this.setState({
    modalShown: 0
  })
}

onShowModal(id) {
  this.setState({
    modalShown: id
  })
}

checkModal(id) {
  if (id == this.state.modalShown) {
    return true;
  } else {
    return false;
  }
}

<Modal show={this.checkModal(item.id)} onHide={this.onCloseModal.bind(this)}</Modal>