概述

当使用 React 进行一些用户输入的行为时，我们需要拿到用户输入，即将输入框设置为受控组件，这时需要使用其他的库，我们主要使用 rc-form 这个库，它是 react 高阶 form 组件。 官方文档

import { createForm, formShape } from 'rc-form';
class Form extends React.Component {
  static propTypes = {
    form: formShape,
  submit = () => {
    this.props.form.validateFields((error, value) => {
      console.log(error, value);
  render() {
    let errors;
    const { getFieldProps, getFieldError } = this.props.form;
    return (
        <input {...getFieldProps('normal')}/>
        <input {...getFieldProps('required', {
          onChange(){},  // have to write original onChange here if you need
          rules: [{required: true}],
        {(errors = getFieldError('required')) ? errors.join(',') : null}
        <button onClick={this.submit}>submit</button>
export createForm()(Form);
static 用法。关键字 static 用于定义静态方法，并且不能在类的实例上调用静态方法，而应该通过类本身调用。上述例子中定义 propTypes 属性，不太懂？？？并且后面都没有用到这个属性的
通过 createForm()(Form) 使得组件 Form 的 props 上挂载了一个 form 对象，并且这个 this.props.form 对象有 getFieldProps 、 getFieldError 和 validateFields 三个方法
直接在 input 上挂载 rc-form 的属性即可将 input 设置为受控组件
createForm
getFieldProps
getFieldProps(name, option): Object { [valuePropName], [trigger], [validateTrigger] } 
将会在可以支持 value 和 onChange 接口的 input 或者 inputComponent 设置 props。设置之后将会创建一个绑定在 input 上
  <input {...getFieldProps('name', { ...options })} />
</form>
name: String
这个 input 唯一的 name
option: Object
Option
Description
Default
option.getValueFromEvent 的默认值
function defaultGetValueFromEvent(e) {
  if (!e || !e.target) {
    return e;
  const { target } = e;
  return target.type === 'checkbox' ? target.checked : target.value;
validateField
validateFields([fieldNames: String[]], [options: Object], callback: (errors, values) => void)
通过字段名验证并且获取字段值
options
options 和 async-validator 的方法相同，并且增加了 force 和 scroll