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