Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法
Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法
一、getFieldDecorator
getFieldDecorator是一个方法,这个方法接收两个参数,第一个是表单的字段对象,第二个是验证规则。这个方法本身返回一个方法,需要将需要获取值的标签包裹进去。
<From>
<FormItem>
//JS代码书写时需要用 { } 包裹起来,不能直接写在代码块中
{
getFieldDecorator('userName',{
initialValue:'Jack',
rules:[]
})(
<Input placeholder='请输入用户名'/>
)
}
</FormItem>
</From>
第一个参数是用户自定义的、用于识别该控件的变量名,这样便于在获取或设置该控件的值。
2019.3.12补充:值得注意的是,getFieldDecorator是一个非常智能的方法,它可以获得自定义组件的value值,在提交表单时会很方便。其次,initialValue的值会覆盖子组件中的placeHolder,如果子组件是下拉框,也会根据initialValue的值来匹配自己的value,并显示相应的值,可以说非常智能了。
二、getFieldValue
handleSubmit = e => {
const { dispatch } = this.props;
e.preventDefault();
var date_juban = this.props.form.getFieldValue('date_juban');
this.state.open_time_start = date_juban[0];
this.state.open_time_end = date_juban[1];
if (this.refs.pics.state.fileList.length > 0)
this.state.image = this.refs.pics.state.fileList[0].response.url;
this.state.location_longitude = this.props.form.getFieldValue('location_longitude');
this.state.location_latitude = this.props.form.getFieldValue('location_latitude');
}
在提交表单或是与后端交互时,如果需要一个控件的值,那么就用this.props.form.getFieldValue('变量名')的方式进行获取,注意:‘变量名’这个参数只能由getFieldDecorator所设定的。
注意:getFieldValue不能获取没有使用getFieldDecorator绑定的控件(即:如果控件值标注了id属性,用这个方法无效)。应使用document.getElementById("id名").value的方式进行获取值。
三、setFieldValue
<FormItem {...formItemLayout} label={<span>地图</span>}>
<AMapModule
lng={''}
lat={''}
address={getFieldValue('position')}
getMapPoint={point => {
setFieldsValue({
location_latitude: point.lat,
location_longitude: point.lng,
});
}}
getMapAddress={address => {
setFieldsValue({
position: address,
});
}}
/>
</FormItem>
上述代码是我在表单中截取的一部分,该控件是一个地图控件。用户点击地图中的某个位置,会在同页面的input框中实时显示经度、维度、位置描述。这三个input框的id分别是location_latitude、location_longitude、position。