要使Ant Design表单验证起作用,需要在Form.Item中设置name属性,并在Form组件中使用组件的form属性。下面是一个代码示例:
import { Form, Input, Button } from 'antd';
const MyForm = Form.create({ name: 'myForm' })(props => {
const { getFieldDecorator, validateFields } = props.form;
const handleSubmit = e => {
e.preventDefault();
validateFields((err, values) => {
if (!err) {
console.log('Received values:', values);
}
});
};
return (
{getFieldDecorator('username', {
rules: [{ required: true, message: 'Please input your username!' }],
})()}
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your password!' }],
})( )}
);
});
在这里,我们使用form.create()高阶组件来创建带有form属性的表单。然后,我们在每个Form.Item中设置name属性,并使用getFieldDecorator来设置表单验证规则。最后,在handleSubmit函数中调用validateFields来验证表单并提交数据。