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

Posted 2023-02-22

【中文标题】使用转义键关闭反应引导模式

【英文标题】：Closing a react bootstrap modal with escape key

【发布时间】：2017-02-18 10:57:06

【问题描述】：

我有 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 - 为什么退出键没有响应？

这是正在运行的模态图像。

【参考方案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>

【讨论】：

对不起，我没有提供足够的代码，但我实际上已经（几乎完全）完成了您编写的代码：<Modal show=item.id === this.state.modalShown onHide=this.onCloseModal.bind(this, item.id)></Modal>

那你能提供一个 JSFiddle/JSBin 吗？我无法重现您的问题，在我的示例中转义键有效。

如果 API 真的不起作用，您可以在 ESC 按键上添加一个事件监听器，然后调用 onCloseModal