问题简述
在用到AntDesign的Form表单时往往有时候会用到一些选择器,通常有时候选择器本身会有一个默认值,我们往往习惯用value或defaultValue去注入默认值,但是实际上,在Form表单内写这些选择器组件的时候往往就会出现非法警告。
出现原因
选择器基本上都是写在表单字段组件内,用于数据双向绑定、校验、布局等,因为控件是被Form.Item 包装的,且被设置了 name 属性的 ,表单控件会自动添加 value,数据同步将被 Form 接管,这会导致不能用value 或 defaultValue 等属性来设置表单域的值,否则会出现组件绑定的值在动态更新的时候出现问题。
解决办法
默认值可以用 Form 里的 initialValues 来设置,而当 initialValues 需要动态更新时,就需要用Form表单的 setFieldsValue 来更新,它不能被 setState 动态更新。
1.form
表单的默认getFieldDecorator()方法,在里面校验,在里面注射默认值。
<FormItem label="应用权限">
{
getFieldDecorator('appIdList', {
rules:[{
validator: (rule, value, callback) => {
if(value && value.length){
callback()
}else{
callback('应用权限请至少勾选一个')
}
}
}],
initialValue: this.state.appIdList
})(<Checkbox.Group options={options} onChange={this.onChange} />)
}
</FormItem>
2.在form
上直接找得到对应字段注入initialValues
<Form
name="form"
{...formItemLayout}
initialValues={{
['checkbox-group']: defaultValue, //注:在此行将form的对应字段注入对应值
}}
>
<Form.Item name="checkbox-group" label="Checkbox.Group">
<Checkbox.Group options={options} onChange={this.onChange} />
</Form.Item>
</Form>
3、在编辑时通过setFieldsValue ()方法直接向表单的指定那行指定注入
if(isEdit){
form.setFieldsValue({
checkbox-group: defaultValue; //form的name属性字段'checkbox-group'注入对应默认值
})
}
注意:
仔细看API,你会发现针对组件设置默认值,可以有在Form设置initialValues进行字段数据处理更新,也可以在Form的Item里面通过使用initialValue 进行默认数据处理。但是通常情况下我一般会推荐优先使用 Form 的 initialValues
来处理,理由如下: