react-responsive-modal :当我们在 div 外单击时如何防止关闭模态

肖耶布·梅蒙

我正在使用react-responsive-modal来实现我的模态。我面临的一个问题是,当我在模态 div 之外单击屏幕上的任意位置时,我的模态会关闭。我希望我的模态仅在我单击取消或关闭按钮时关闭。我找到了 onOverlayClick 函数道具,我用它来应用 preventDefault 但它没有用。

任何人都可以提出一种实现此功能的方法。提前致谢。

class CustomModal extends Component{
constructor(props) {
    super(props);
}

onOverlay = (e) =>{
  e.preventDefault();
}

render(){
    const { props } = this;

    return(
        <Modal open={props.open} onClose={props.onCloseModal} 
         onOverlayClick={e =>this.onOverlay(e)} center>
        <div className="on-setting-modal">
          <h6>"are you sure ?"</h6>
          <div className="on-setting-modal-buttons">
            {
                !!props.showCancel &&
                <button onClick={props.onCloseModal} >Cancel</button>
            }
            <button onClick={props.onOkModal} >OK</button>
          </div>
        </div>
      </Modal>
  )
 }
}

export default CustomModal
费赞拜格

您的问题可以通过使用名为closeOnOverlayClick={false}this的属性来解决,当我们点击覆盖时,模态不会关闭

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

当我们需要多个EntityManager时?

当我们到达列表底部时,React Native FlatList会加载更多

当我们需要修剪时,我们不需要在oracle中

当我通过列表映射时,React-bootstrap Modal组件打开/关闭所有模态

当我们使用React js和Bootsrap 4单击按钮时如何动态添加选项卡

当我们在React Router中侦听历史记录时,URL参数尚未更新

当我们在ChangeNotifier中使用notifyListeners时?

React钩子:当我们尝试调用函数时,useMemo和useEffect具有Missing依赖项

当我们有ViewModels时,我们还需要onSaveInstanceState()吗?

仅当我们在模态内容之外单击时,才关闭覆盖

我们如何从JavaScript访问div?

当我们旁边有更多的div时,如何在div内制作对角动画(反射)

当我们将鼠标悬停在另一个div上时,隐藏的div出现并移动

我们如何“凿”一个div?

我们如何获得同级div的所有ID?

当我们单击时,删除活动的类

当我们谈到 RPC 时,我们指的是 Windows 上的特定技术吗?

当我们有多个查询时的 Kafka Connect

当我们更改系统时间时,hornetq 失败

我们如何隐藏div的背景内容?

当我们关闭开关时,我们如何取消选择该行

当我们链接任何第三方模块时,react native 的新升级版本(0.60)出现问题

当我们在服务中使用 ngOnInit 时?

React - 当我们点击一个 img 时启用/禁用组件

React - 当我们点击 img 时改变视图

当我单击 React js 中的按钮时,如何创建一个新的 div?

当我在模态框外单击时,如何关闭我的模态框?

当我们使用 React 从列表中单击第一项时打开模态

当我们对 React 应用程序使用 UseReducer 钩子方法时导出操作