gpt4 book ai didi

reactjs - form.validateFields() 在 ant 设计表单中的 onValuesChange 内失败

转载 作者:行者123 更新时间:2023-12-03 17:32:31 24 4
gpt4 key购买 nike

我正在尝试以编程方式提交和 ant design (v4.3.4) 表单验证但 form.validateFields()总是失败 outOfDate: true如果在里面 onValuesChange() . (这个表单是一个更大的表单工厂的一部分,所以我最终必须将表单组件传递给一个 props 函数,然后该函数将调用提交。

const FormA = (props: StepProps) => {
const [form] = useForm();

return (
<Form
form={form}
name="form-a"
onValuesChange={async (changedValues, allValues) => {
form.validateFields().
then(values => console.log("PASSED").
catch(errorInfo => console.log("FAILED", errorInfo));
}}
>
<Form.Item
rules={[{ required: true }]}
name="item-a">
<Input />
</Form.Item>
<Form.Item
rules={[{ required: true }]}
name="item-b"
>
<Input />
</Form.Item>
<Form.Item
rules={[{ required: true }]}
name="item-c"
>
<Input />
</Form.Item>
</Form>
);
};

export default FormA;
我已调用 form.validatedField()函数 onValuesChange。我从来没有在控制台中得到“PASSED”,即使所有输入都有值我总是得到“FAILED”,并显示以下错误信息:
{
errorFields: []
outOfDate: true
values: { ..}
}
如果我从 onValuesChange 中删除 form.validateFields()然后它工作正常。
我似乎无法弄清楚什么是 outOfDate以及为什么验证总是在 onValuesChange 函数中失败。

最佳答案

以编程方式提交表单的最佳方式是使用 form.submit()这是 form instance 的一部分.此功能将提交并验证您的表单。基于验证结果,onFinishonFinishFailed将被调用(见 Form API )。

const FormA = (props: StepProps) => {
const [form] = useForm();

const handleOnFinish = (values) => {
// handle valid form submission
}

const handleOnFinishFailed = ({ values, errorFields, outOfDate }) => {
// handle invalid form submission
}

return (
<Form
form={form}
name="form-a"
onFinish={handleOnFinish]
onFinishFailed={handleOnFinishFailed}
>
...
</Form>
);
};

export default FormA;
outOfDate使用此方法时问题已解决。如果您需要对表单项进行额外的验证处理,您可以使用 onChangeform.validateFields()在组件中(请参阅 issue )。

关于reactjs - form.validateFields() 在 ant 设计表单中的 onValuesChange 内失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62731874/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com