在AntD中未触发表单onFinish/onSubmit [英] Form onFinish/onSubmit not triggered in AntD

问题描述

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

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

字段组件的onChange已验证，但单击提交时未调用onFinish.

The onChange of field components are validated, but onFinish is not called on click of submit.

是因为lodash/webpack还是反应版本依赖性问题.

Is it because of lodash/webpack or react version dependency issue.

这是在镜头electronjs应用程序上发生的，相关性如下:

This is happening on lens electronjs application and the dependencies are below:

"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函数来发布一些消息.

I don't see any console errors as well and the onFinish function is not at all called to post some messages.

推荐答案

不确定是什么原因，表单内的提交按钮未触发.因此，可以使用外部提交验证功能进行处理.

Not sure for what reason, the submit button inside form not triggered. Hence handled with external submit validation function.

const handleFormSubmit = () => {
    console.log('called...');
    form
      .validateFields()
      .then((values) => {
        console.log('values ...', values);
        // Submit values
        // SubmitValues(values);
      })
      .catch((errorInfo) => {
        console.log('errorInfo ...', errorInfo);
      });
  };

        <Button type="primary" htmlType="submit" onClick={handleFormSubmit}>
          Log in
        </Button>

这篇关于在AntD中未触发表单onFinish/onSubmit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！