antDesign表单getFieldDecorator

1）getFieldDecorator是一个方法，这个方法接收两个参数，第一个是表单的字段对象，第二个是验证规则。这个方法本身返回一个方法，需要将需要获取值的标签包裹进去。

const formItemLayout = {

    labelCol: {

        span: 12,

    },

    wrapperCol: {

        span: 12,

    },

};

<From>
  <FormItem>
      //JS代码书写时需要用 { } 包裹起来，不能直接写在代码块中  
      {
          getFieldDecorator('userName',{
            initialValue:'Jack',
             rules:[]
             })(
                    <Input placeholder='请输入用户名'/>
                )
        }
  </FormItem>
<Form.Item {...formItemLayout} label={'名称'}>
                    {getFieldDecorator('searchName', { rules: [{ required: true, message: '请输入菜品名称' }], })(
               <Input placeholder={'请输入名称'} />
     )}
</Form.Item>
</From>

okHandle = () => {//提交表单时的校验
        const { form } = this.props;
        form.validateFields((err, fieldsValue) => {
            console.log(err, fieldsValue);
            if (err) return;
            const { searchName = '' } = fieldsValue;
        })
    };

 

第一个参数是用户自定义的、用于识别该控件的变量名，这样便于在获取或设置该控件的值。
2019.3.12补充：值得注意的是，getFieldDecorator是一个非常智能的方法，它可以获得自定义组件的value值，在提交表单时会很方便。其次，initialValue的值会覆盖子组件中的placeHolder，如果子组件是下拉框，也会根据initialValue的值来匹配自己的value，并显示相应的值，可以说非常智能了。

2）在提交表单或是与后端交互时，如果需要一个控件的值，那么就用this.props.form.getFieldValue('变量名')的方式进行获取，注意：‘变量名’这个参数只能由getFieldDecorator所设定的。

注意：getFieldValue不能获取没有使用getFieldDecorator绑定的控件（即：如果控件值标注了id属性，用这个方法无效）。应使用document.getElementById("id名").value的方式进行获取值。

3）setFieldValue

setFieldsValue({
                    location_latitude: point.lat,
                    location_longitude: point.lng,
                  });

参考：https://www.cnblogs.com/tian874540961/p/10237713.html

https://blog.csdn.net/weixin_30355437/article/details/97438496