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

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 的文档，按Escape 键将退出模式。但是它不起作用。我相信我已经完成了所有设置，因为我的每个按钮都有一个唯一的 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>