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

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

您的组件状态似乎无法正确表示模态的状态。我给你写了一个例子（这可能不是最佳实践？），它展示了如何以更具体的方式处理状态。

\n\n

onCloseModal() {\n  this.setState({\n    modalShown: 0\n  })\n}\n\nonShowModal(id) {\n  this.setState({\n    modalShown: id\n  })\n}\n\ncheckModal(id) {\n  if (id == this.state.modalShown) {\n    return true;\n  } else\xc2\xa0{\n    return false;\n  }\n}\n\n<Modal show={this.checkModal(item.id)} onHide={this.onCloseModal.bind(this)}</Modal>\n

\n