在React Rodal中禁用模态背景

Question

我正在使用Rodal软件包在我的一个项目中实现模态功能，现在我想在模式的背景中禁用外部点击模式的背景。我怎么能实现这一目标？这是包https://www.npmjs.com/package/rodal

Answer 1

更新：从Rodal v1.5.1开始，我们可以传递道具closeMaskOnClick以阻止模态关闭。有关详细信息，请参阅this。

适用于较旧版本的Rodal ：

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

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

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

1. showMask中有一个名为Rodal的道具，您可以将其作为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开始，您只需将closeMaskOnClick选项设置为false。