表单onFinish/onSubmit未在AntD中触发

Question

表单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函数根本没有被调用来发布一些消息。

Answer 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()
},
}),
]}
>

Answer 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>