antd Modal中表单验证

最新推荐文章于 2025-03-13 14:33:34 发布

zhuang0911

最新推荐文章于 2025-03-13 14:33:34 发布

阅读量677

点赞数

文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/zhuang0911/article/details/131941170

版权

在AntDesign的Modal组件中，通过onOk属性定义点击确定后的回调函数，执行表单校验。如果校验成功，显示加载图标并提交信息；失败则保持Modal打开并提示错误。利用Promise处理异步操作，成功时显示通知，失败则重新显示Modal并捕获错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Ant Design的Modal组件中，onOk属性是一个点击确定按钮后的回调函数。在使用Modal组件时，可以通过定义onOk属性来指定点击确定按钮后的操作。在给Modal组件传递onOk属性时，可以传递一个函数作为参数，该函数将在点击确定按钮后被调用。在给Modal组件传递onOk属性时，可以使用箭头函数或普通函数来定义回调函数。在回调函数中，可以执行一些操作，比如打印信息或修改组件的状态

场景：实现一个点击Modal确认按钮进行表单校验，按钮显示加载图标，校验成功提交信息，校验不成功，Modal不关闭，进行表单错误提示。

问题：Modal在点击确认后关闭

解决：

onOk: async () => {
        return new Promise((resolve, reject) => {
          setUpdateLoading(true) // 提交按钮显示提交中
          form.validateFields().then(values => {
                const {params} = form.getFieldsValue() 
                setUpdateDisable(true)
                // 请求校验参数值
                request(api, params, {
                  success: (res) => {
                    notification.notice({
                      id: new Date(),
                      type: 'success',
                      title: intl.formatMessage({id: 'Success'}),
                      content: '提交成功',
                      iconNode: 'icon-correct-s',
                      duration: 5,
                      closable: true
                    })
                    refresh && refresh()
                  },
                  complete: (res) => {
                    setUpdateDisable(false)
                    setUpdateLoading(false)
                    resolve()
                  },
                  failed: (e) => {
                    reject(e)
                  }
                })
              }
          ).catch(e => {
            setUpdateLoading(false)
            thisModal.update({
              visible: true
            })
            return reject(e)
          })
        })
      },
      confirmLoading: updateLoading