Ant Design 中的 Form 组件的 initialValue 属性和 validateFields 方法是可以一起使用的,但是需要注意一些细节。
首先,确保在使用 Form 组件时,传入了 form 属性,并使用 getFieldDecorator 方法对表单项进行装饰。这样才能使用 initialValue 属性来设置表单项的初始值。
其次,validateFields 方法需要在表单提交或者表单校验的时候触发,而不是在初始化表单的时候。你可以在表单提交按钮的点击事件中调用 validateFields 方法。
以下是一个示例代码,演示了如何正确使用 initialValue 和 validateFields:
import React from 'react';
import { Form, Input, Button } from 'antd';
class MyForm extends React.Component {
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
}
render() {
const { getFieldDecorator } = this.props.form;
return (
{getFieldDecorator('username', {
initialValue: 'admin', // 设置初始值
rules: [{ required: true, message: 'Please input your username!' }],
})(
)}
{getFieldDecorator('password', {
initialValue: '123456', // 设置初始值
rules: [{ required: true, message: 'Please input your password!' }],
})(
)}
);
}
}
const WrappedMyForm = Form.create()(MyForm);
export default WrappedMyForm;
在上述示例中,我们在 getFieldDecorator 中使用 initialValue 属性来设置表单项的初始值。在 handleSubmit 方法中,我们调用 validateFields 方法来进行表单校验。当校验通过时,会将表单的值打印出来。
这样,initialValue 和 validateFields 就能够正确地配合使用了。