在 React Rodal 中禁用模态背景

Question

我正在使用 Rodal 包在我的一个项目中实现模态功能，现在我想在模态背景的外部单击时禁用模态的背景。我怎样才能做到这一点？这是包裹https://www.npmjs.com/package/rodal

Answer 1

更新：从 Rodal v1.5.1 开始，我们可以传递一个 prop closeMaskOnClick 来防止 modal 关闭。如需更多信息，请参阅this。

---

对于旧版本的 Rodal：

当您单击close 或ok 按钮时，将触发事件并调用您的hide 函数。同样，当您在模态框外单击时，也会调用hide 函数，这会将状态变量visible 设置为false，并且您的模态框将被隐藏。

hide(){
   this.setState({ visible: false });
}

有两种方法可以防止这种情况发生。

1. Rodal中有一个叫showMask的prop，你可以把它传递为false。

这样，

<Rodal visible={this.state.visible} showMask={false} onClose={this.hide.bind(this)}>
   ....
</Rodal>

但将其传递为 false 不会显示掩码。所以还有另一种方式。

1. 您可以稍微修改您的hide 函数，以检查它是在单击ok 或close 按钮后被调用，还是由于您的模式之外的任何点击事件而被调用。

您可以查看：

hide(event){
   if (event.target.className === 'rodal-mask') {
       return;
   }
   this.setState({ visible: false });
}

我已经在我的机器上测试了这两种方法，并且效果很好。希望对你有帮助:)

Answer 2

从 Rodal 版本 1.5.1 开始，您只需将 closeMaskOnClickoption 设置为 false。