antd-pro下的form使用注意事项

好久没有更新博客，因为有了新的任务，我负责全部的页面开发，有点心累。。。

正题开始：

antd-pro下的表单如果使用了getFieldDecorator函数对表单项进赋值的话，那么你是无法通过直接设置value来控制表单的值得，例如：

<Input placeholder="请输入" value='XXX' />
// 此时赋值会失败，并且控制台会打印错误

解决方法：

1.在render或者mounted的时候直接操作props.values(不推荐)

render(){
    const {values}=this.props;
    values.name='XXX';
    
    return (
        .
        .
        .
        <FormItem label='名字'>
            {getFieldDecorator(form,settings,gatewayFormName,'gatewayIds',name)(
                <Input placeholder="请输入" /> //此时XXX会成功赋值
            )}
        </FormItem>
    )
}

2.在antd中推荐使用form对象自带的setFieldsValue(),form对象是绑定在props下的，所以可以这么使用：

this.props.form.setFieldValue({
    name:'value'
})

-----------------------------------------------------------------------

在antd下同一个组件是无法使用两个form表单的，因为Form.create（）会自动将form对象绑定在this.prop下，所以在你的form提交中你会两次用到this.props.form.validateFields()方法，但是其实是在操作同一个form对象，这是表单的字段，验证以及重置都是同步的

解决办法：

将其中的一个form抽取出来作为一个单独的组件，在后在新的组件中重新生成form对象(antd-pro下是@Form.create())。这块我就不上代码了，太多了，从公司内网一字一字码太费劲了。记得如果两个组件有共用的属性，记得将其提升到model中或者上一层父元素的state中

--------------------------------------------------------------------------

antd-pro下选择框如果为多选的话必须给他一个空数组或者是一个有数据的数组作为初始值。在antd-pro下默认的初始值是‘’，会导致程序无法运行。

const values={names:[]};

<FormItem label='名字'>
   {getFieldDecorator(form,settings,gatewayFormName,'names',values)(
        <Select style={{width:'100%'}} mode="multiple">
            <Select.Option value='1'>1</SelectOption>
        </Select>
   )}
</FormItem>

以上就是我最近在项目的开发当中遇到的一些问题以及解决办法，因为代码在公司的内网，这是笔者一个字一个字码出来的，如果觉得对你有所帮助，希望各位点个赞

antd-pro下的form使用注意事项

猜你喜欢