AntD 中未触发表单 onFinish/onSubmit答案

【问题标题】：Form onFinish/onSubmit not triggered in AntDAntD 中未触发表单 onFinish/onSubmit
【发布时间】：2021-02-24 16:15:50
【问题描述】：

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

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

验证了字段组件的onChange，但是点击提交时不会调用onFinish。

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

这发生在 lens electronjs 应用程序上，依赖项如下：

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

【问题讨论】：

您能说明拒绝投票的原因并结束这个问题吗？

标签： reactjs typescript forms validation antd

【解决方案1】：

请务必检查您是否为非必需输入字段设置了任何自定义验证器。我有一个类似的问题，我忘记让自定义验证器在没有输入时返回已解决的承诺（因为它不是必需的输入字段）。

下面的else return Promise.resolve() 解决了我的问题。

  <Form.Item
    label="End Date"
    name="end_date"
    rules={[
      ({ getFieldValue }) => ({
        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()
        },
      }),
    ]}
  >

【讨论】：

我发现的另一个类似问题是当您需要根据 fieldA 的输入验证 fieldB 时。 fieldA 上的规则将在您更改 fieldA 时触发，但警告不会消失，直到您再次触摸 fieldA。要解决此问题，只需将 `form.validateFields('fieldA')` 添加到 fieldB 的 onChange

【解决方案2】：

不知道是什么原因，表单里面的提交按钮没有触发。因此使用外部提交验证函数处理。

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>

【讨论】：