閱讀Form組件

Form.create(options)

• mapPropsToFields
• onFieldsChange
• onValuesChange

this.props.form 提供的 API（舉常用的）

方法	說明	類型
getFieldDecorator	用於和表單進行雙向綁定
getFieldsValue	獲取一組輸入控件的值，如不傳入參數，則獲取全部組件的值	Function([fieldNames: string[]])
resetFields	重置一組輸入控件的值（爲 initialValue）與狀態，如不傳入參數，則重置所有組件	Function([names: string[]])
setFieldsValue	設置一組輸入控件的值（注意：不要在 componentWillReceiveProps 內使用，否則會導致死循環。 🌟原因:setFieldsValue 本質是調用外層 wrapper 的 setState，間接用 componentWillReceiveProps，所以死循環了。	({ [fieldName]: value }) => void
validateFields/validateFieldsAndScroll	校驗並獲取一組輸入域的值與 Error，若 fieldNames 參數爲空，則校驗全部組件 --------------------------------- 與 validateFields 相似，但校驗完後，如果校驗不通過的菜單域不在可見範圍內，則自動滾動進可見範圍	(   [fieldNames: string[]],   [options: object],   callback(errors, values) ) => void
		其中 options 參數如下:

• first
• force
• ...

getFieldDecorator(id, options)  

id：必填輸入控件唯一標誌。支持嵌套式的寫法。 

{getFieldDecorator('member[0].name.firstname', {})(<input/>)}

 

Form.Item

• colon 是否展示 label後的:
• extra 與 help類似，當需要錯誤信息和提示文案同時出現時用這個
• hasFeedback 展示校驗狀態圖表，配合Input組件使用

校驗規則 options: {rules: []}

type: 

• string: Must be of type string. This is the default type.
• number: Must be of type number.
• boolean: Must be of type boolean.
• method: Must be of type function.
• regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
• integer: Must be of type number and an integer.
• float: Must be of type number and a floating point number.
• array: Must be an array as determined by Array.isArray.
• object: Must be of type object and not Array.isArray.
• enum: Value must exist in the enum.
• date: Value must be valid as determined by Date
• url: Must be of type url.
• hex: Must be of type hex.
• email: Must be of type email.

 

用法示例

 

function FormComponent(props) {
  const { getFieldDecorator, getFieldError, getFieldsValue } = props.form;
  const handleSubmit = e => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };
  return(
    <Form hideRequiredMark={false} labelCol={{ span: 2 }} wrapperCol={{ span: 10 }} labelAlign="left" onSubmit={handleSubmit}>
      <FormItem label={<span style={{color: 'blue'}}>名稱</span>} hasFeedback help="提示信息???">
        { getFieldDecorator('list[0].name', {
          rules: [{ required: true}]
        })(<Input />) }
      </FormItem>
      <FormItem label="電話號碼">
        { getFieldDecorator('list[0].telephone', {
          rules: [{ required: true, message: '必填啊'}]
        })(<Input />) }
      </FormItem>
      <FormItem label="名稱">
        { getFieldDecorator('list[1].name', {
          rules: [{ required: true}]
        })(<Input />) }
      </FormItem>
      <FormItem label="電話號碼" extra="額外展示的信息">
        { getFieldDecorator('list[1].telephone', {
          rules: [{ required: true, message: '必填啊'}]
        })(<Input />) }
      </FormItem>
      <FormItem label="郵箱">
        {getFieldDecorator('email', {
          rules: [
            {
              required: true
            },
            {
              type: 'email',
              message: '錯誤的 email 格式'
            }
          ]
        })(<Input />)}
      </FormItem>
      <FormItem>
        {getFieldDecorator('check', {
          // getValueFromEvent: e => { console.log(e);return e;}
        })(<Checkbox>確認</Checkbox>)}

      </FormItem>
      <FormItem>
        <Button type="primary" htmlType="submit">提交</Button>
        <button onClick={(e)=>{
          e.preventDefault();
          const err = getFieldError('telephone');
        }}>獲取某個輸入控件的Error</button>
        <button onClick={(e)=>{
        e.preventDefault();
        const value = getFieldsValue();
        }}>獲取輸入控件的值</button>
      </FormItem>
    </Form>
  )
}

const FormWrap = Form.create({
  name: 'custom_login',
  mapPropsToFields: (props) => {
    let formData = {};
    Object.keys(props.dataSource).map(key => {
      formData[key] = Form.createFormField({
        value: props.dataSource[key]
      });
    });
    return formData;
  },
  validateMessages: {
    required: '%s 是必填的'
  },
  onFieldsChange: (props, changedFields, allFields) => {
    let formData = {};
    Object.keys(changedFields).forEach(key => {
      formData[key] = changedFields[key].value;
    });
    // formData爲表單項的鍵值
  },
  onValuesChange: (props, changedValues, allValues) => {
    // changedValues 改變的 value 鍵值對
    // allValues 表單中的所有 鍵值對
    console.log(props, changedValues, allValues);
  }
})(FormComponent);

function EnhancedForm(props, ref) {
  const FormWrapRef = useRef();
  useImperativeHandle(ref, () => ({
    checkValues: options => new Promise(resolve => {
      FormWrapRef.current.validateFields({...options} ,(err, values) => resolve(err, values));
    }),
    setFieldsValue: FormWrapRef.current.setFieldsValue,
    resetFields: FormWrapRef.current.resetFields
  }));
  return (
    <FormWrap {...props} ref={FormWrapRef} />
  )
}
EnhancedForm = forwardRef(EnhancedForm);

export default EnhancedForm;

// 父組件
function App() {
  const formRef = useRef();
  const submitForm = () => {
    formRef.current.checkValues({ force: true, first: true }).then((err, values) => {
      if (!err) {
        console.log(values);
      }
    });
  }
  const resetForm = () => {
    formRef.current.resetFields();
  }
  const setFieldsValue = (params) => {
    formRef.current.setFieldsValue({...params});
  }
  return (
    <div className="App">
      {/* Form */}
      <FormComponent ref={formRef} dataSource={{list: [{telephone: [phone]}, {telephone: 111}]}} />
      <button onClick={submitForm}>提交Form</button>
      <button onClick={resetForm}>重置Form</button>
      <button onClick={()=>setFieldsValue({list: [{telephone: [phone]}, {telephone: 111}]})}>設置電話號碼</button>
    </div>
  );
}