antd 表单设置默认值initialValue后验证失效

方法一:

getFieldDecorator没有第三个参数,如果写了3个参数就会出错

错误代码:

<Form.Item>
            {
              getFieldDecorator(userName, { initialValue: Tom },{
                rules: [{
                  required: true, message: 请输入用户名,
                }],
              })(
                <Input placeholder=请输入用户名/>
              )
            }
</Form.Item>

正确代码:

<Form.Item>
    {
    getFieldDecorator(userName,{
        initialValue:Tom,
        rules:[
          {required: true,message:请输入用户名}
              ]
           })(
         <Input placeholder=请输入用户名/>
           )
}
</Form.Item>

方法二:通过setFieldsValue来设置默认值可以解决

this.props.form.setFieldsValue({
    inputValue1:this.state.inputValue1,
    inputValue2:this.state.inputValue2,
    inputValue3:this.state.inputValue3,
});

如果还不能解决,查看是否在表单提交函数里写了验证代码

handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err) => {
            if (err) {
                console.log(表单验证失败);
            }else{
                this.handleOk();//这里是表单验证成功执行的函数
               
            }
        });

    };

参考:

经验分享 程序员 微信小程序 职场和发展