问题描述: 在使用 Ant Design 表单验证时,发现验证不起作用,并且当组件来自函数传递的状态时,输入值不会更新。
解决方法:
Form
组件中,并且指定了 name
属性。getFieldDecorator
方法对表单组件进行装饰,以便进行表单验证。getFieldDecorator
方法中,可以通过传递 rules
属性定义验证规则,如 required: true
表示必填项。validateFields
方法进行表单验证。在验证通过后,可以获取表单的值进行后续操作。setFieldsValue
方法手动设置表单的值。下面是一个示例代码,演示了如何解决这个问题:
import React from 'react';
import { Form, Input, Button } from 'antd';
const MyForm = () => {
const [name, setName] = React.useState('');
const handleSubmit = e => {
e.preventDefault();
const { validateFields } = form;
validateFields((errors, values) => {
if (!errors) {
console.log('Form values:', values);
}
});
};
// 使用 getFieldDecorator 对表单进行装饰
const { getFieldDecorator } = form;
return (
{getFieldDecorator('name', {
rules: [{ required: true, message: 'Please enter a name!' }],
initialValue: name, // 从函数传递的状态设置初始值
})( setName(e.target.value)} />)}
);
};
const WrappedMyForm = Form.create()(MyForm);
export default WrappedMyForm;
在上面的代码中,MyForm
组件是一个函数组件,使用 useState
来定义了一个 name
状态,同时使用 Form.create()
方法对 MyForm
进行装饰,将 form
对象传递给组件。
在 MyForm
组件中,使用 getFieldDecorator
方法对表单进行装饰,并通过传递 rules
属性设置了验证规则。在 Input
组件中,使用 onChange
事件来更新 name
状态的值。
在表单提交时,调用 validateFields
方法进行表单验证,并在验证通过后打印表单的值。如果组件来自函数传递的状态,需要在 getFieldDecorator
方法中通过 initialValue
属性设置初始值,并在状态变化时使用 setFieldsValue
方法手动更新表单的值。
希望以上解决方法对你有帮助。