首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >表单onFinish/onSubmit在AntD中未触发

表单onFinish/onSubmit在AntD中未触发
EN

Stack Overflow用户
提问于 2021-02-25 00:15:50
回答 2查看 984关注 0票数 0

antd表单onSubmit的简单演示不起作用

https://ant.design/components/form/#components-form-demo-register

将验证字段组件的onChange,但不会在单击提交时调用onFinish。

是因为lodash/webpack还是react版本依赖问题。

这是在lens electronjs应用程序上发生的,依赖关系如下:

代码语言:javascript
运行
复制
"dependencies": {
    "@k8slens/extensions": "4.0.0-beta.3",
    "antd": "4.8.4",
    "dayjs": "1.10.4",
    "k8s-api": "1.2.19",
    "lodash": "4.17.20",
    "react-dom": "17.0.1",
    "react-jsonschema-form": "1.8.1",
    "react-router": "5.2.0",
    "rjsf-antd": "0.1.5-alpha.17"
  },
  "devDependencies": {
    "@ant-design/compatible": "1.0.8",
    "@ant-design/icons": "4.5.0",
    "@rjsf/antd": "2.3.0",
    "@rjsf/core": "2.4.2",
    "@types/lodash": "4.14.108",
    "@types/node": "12.0.0",
    "@types/react": "16.9.35",
    "@types/react-jsonschema-form": "1.7.4",
    "@types/react-redux": "^7.1.16",
    "@types/redux": "^3.6.0",
    "@types/redux-devtools-extension": "^2.13.2",
    "css-loader": "5.0.1",
    "husky": "4.3.7",
    "prettier": "2.1.1",
    "pretty-quick": "3.1.0",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-observable": "^1.2.0",
    "sass": "1.32.0",
    "sass-loader": "10.0.2",
    "style-loader": "2.0.0",
    "stylelint": "12.0.0",
    "stylelint-config-prettier": "8.0.0",
    "stylelint-config-standard": "19.0.0",
    "stylelint-scss": "3.13.0",
    "ts-loader": "8.0.4",
    "tslint": "5.20.1",
    "tslint-config-prettier": "1.18.0",
    "tslint-eslint-rules": "4.1.1",
    "tslint-loader": "3.6.0",
    "tslint-no-circular-imports": "0.3.0",
    "tslint-plugin-prettier": "2.0.1",
    "tslint-react": "3.2.0",
    "tslint-react-hooks": "2.2.1",
    "tslint-staged": "0.1.3",
    "typescript": "4.0.3",
    "webpack": "4.44.2",
    "webpack-cli": "3.3.11"
  },

我也没有看到任何控制台错误,并且根本没有调用onFinish函数来发布一些消息。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-02-25 01:05:49

不确定是什么原因,表单内的提交按钮没有触发。因此使用外部提交验证函数进行处理。

代码语言:javascript
运行
复制
const handleFormSubmit = () => {
    console.log('called...');
    form
      .validateFields()
      .then((values) => {
        console.log('values ...', values);
        // Submit values
        // SubmitValues(values);
      })
      .catch((errorInfo) => {
        console.log('errorInfo ...', errorInfo);
      });
  };

        
          Log in
票数 0
EN

Stack Overflow用户

发布于 2021-03-02 02:18:21

请务必检查是否为非必填输入字段设置了自定义验证器。我遇到过一个类似的问题,当没有输入时,我忘记让自定义验证器返回已解析的promise (因为它不是必需的输入字段)。

就是这条线

下面解决了我的问题。

代码语言:javascript
运行
复制
({
        validator(_, value) {
          if (value) {
            if (value >= getFieldValue("start_date")) {
              return Promise.resolve()
            }
            return Promise.reject(
              "End date shall be later than the start date"
            )
          } else return Promise.resolve()
        },
      }),
    ]}
  >
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66354698

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档