在AntDesign
中,表单验证是通过Form
组件的rules
属性来实现的。当在onChange
事件中修改表单的值时,AntDesign
默认不会触发表单验证。
要解决这个问题,可以使用Form
组件的validateFields
方法手动触发表单验证。
以下是一个包含代码示例的解决方法:
import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';
const DemoForm = () => {
const [form] = Form.useForm();
const [value, setValue] = useState('');
const handleChange = (e) => {
setValue(e.target.value);
// 手动触发表单验证
form.validateFields(['fieldName']);
};
const handleSubmit = () => {
form.validateFields().then((values) => {
// 表单验证通过,可以进行提交操作
console.log(values);
});
};
return (
);
};
export default DemoForm;
在上面的代码中,我们使用useState
来保存表单字段的值,并在Input
的onChange
事件中更新该值。然后,我们使用form.validateFields(['fieldName'])
方法手动触发对该字段的验证。
在提交表单时,我们使用form.validateFields().then()
方法来进行表单的完整验证。如果验证通过,我们可以进行提交操作。
通过这种方式,我们可以在onChange
事件中实时验证表单字段,并在提交时进行完整的表单验证。