FormItem3x属性

Form & Form.Item正确的嵌套结构

<Form>
    <Form.Item></Form.Item>
</Form>

Form.Item

const formItemLayout = {
    labelCol: {span: 6},
  wrapperCol: {span: 18},
}
<Form.Item
  {...formItemLayout}
  label="内容"
  required
  hasFeedback>
  {getFieldDecorator('content', {
    initialValue: '',
    rules: [{
      required: true, message: '请输入内容'
    }],
  })(<Input
       prefix={<Icon type="user" />} 
       type="number" 
       placeholder="请输入内容" 
     />)}
</Form.Item>

要删除 Input的 value属性，否则控制台报错
antd 里面很多的组件都是内部用state去管理，state根据控制层的props变化，
这样state可以有设置默认值等各种行为

prefix表单前缀

const prefixSelector = getFieldDecorator('prefix', {
  initialValue: '86',
})(
  <Select style={{ width: 70 }}>
    <Option value="86">+86</Option>
    <Option value="87">+87</Option>
  </Select>,
)
<Form.Item label="Phone Number">
  {getFieldDecorator('phone', {
    rules: [{ required: true, message: 'Please input your phone number!' }],
  })(<Input addonBefore={prefixSelector} style={{ width: '100%' }} />)}
</Form.Item>

ValuePropName

<Form.Item
  {...formItemLayout}
  label="内容"
  required
  hasFeedback>
  {getFieldDecorator('content', {
    initialValue: '',
    valuePropName: 'fileList',
    // getValueFromEvent: this.handleChange,
    rules: [{
      required: true, message: '请输入内容'
    }],
  })(<Upload />)}
</Form.Item>
<Form.Item {...tailFormItemLayout}>
  {getFieldDecorator('agreement', {
    valuePropName: 'checked',
  })(
    <Checkbox>
      I have read the <a href="">agreement</a>
    </Checkbox>,
  )}
</Form.Item>

表单验证

function validateToNextPassword (rule, value, callback) {
  if (value && state.confirmDirty) {
    form.validateFields(['confirm'], { force: true });
  }
  callback();
};
<Form.Item label="E-mail">
  {getFieldDecorator('email', {
    rules: [
      {
        type: 'email',
        message: 'The input is not valid E-mail!',
      },
      {
        required: true,
        message: 'Please input your E-mail!',
      },
      {
        validator: this.validateToNextPassword,
      },
    ],
  })(<Input />)}
</Form.Item>

Switch表单属性

Picker

const pickProps = [
  "help",
  "extra",
  "labelCol",
  "wrapperCol",
  "colon",
  "hasFeedback",
  "validateStatus",
  "hasFeedback",
  "getValueFromEvent", // fieldProps
  "initialValue",
  "normalize",
  "trigger",
  "valuePropName",
  "validateTrigger",
  "validateFirst"
]