阅读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: 18610597224}, {telephone: 111}]}} />
      <button onClick={submitForm}>提交Form</button>
      <button onClick={resetForm}>重置Form</button>
      <button onClick={()=>setFieldsValue({list: [{telephone: 18610597224}, {telephone: 111}]})}>设置电话号码</button>
    </div>
  );
}