Question

编辑：我通过为模式设置closeOnEscape={false}来解决了这个问题，然后在下面的代码中添加了eventhandlar来监听转义，然后在需要的情况下手动关闭模式。

我有一个带有表单的Modal。默认情况下，如果单击Escape，则语义UI会关闭模式。我想要以下行为：

如果我的状态变量showNewModifierInput是true，并且用户按下了转义键，我想将showNewModifierInput设置为false，但是模式保持打开状态。否则，模态应正常关闭。

我试图在按下某个键时捕获事件，如果在适当的情况下遇到该事件，我将调用preventDefault（）来阻止事件传播到SemanticUI调用关闭模式函数的地方。

我在chrome开发工具中使用了monitorEvents（），并查看了当我按下Escape键时在body中触发的所有事件。调用的第一个事件是keydown，因此我将此代码添加到了模态组件中：

constructor(props) {
    // other code removed...
    this.catchEscape = this.catchEscape.bind(this)
}

componentDidMount(){        
    document.addEventListener("keydown", this.catchEscape);
}

catchEscape(e){
    if(e.key == 'Escape' && this.state.showNewModifierInput){
        e.preventDefault()
        this.setState({
            ...this.state,
            showNewModifierInput: false
        })
    }
}

模式仍然处于关闭状态，因此preventDefault不会阻止模式被关闭，或者body.keypress之前触发了其他事件，导致chrome开发工具无法捕获。

感谢任何帮助！

语义UI React-防止在单击“转义”按钮时关闭模态

0 个答案: