概述

当使用 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 (
      <div>
        <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>
      </div>
    );
  }
}

export createForm()(Form);

说明：

1. static 用法。关键字 static 用于定义静态方法，并且不能在类的实例上调用静态方法，而应该通过类本身调用。上述例子中定义 propTypes 属性，不太懂？？？并且后面都没有用到这个属性的

2. 通过 createForm()(Form) 使得组件 Form 的 props 上挂载了一个 form 对象，并且这个 this.props.form 对象有 getFieldProps 、 getFieldError 和 validateFields 三个方法

3. 直接在 input 上挂载 rc-form 的属性即可将 input 设置为受控组件

API

createForm

getFieldProps

getFieldProps(name, option): Object { [valuePropName], [trigger], [validateTrigger] } 

将会在可以支持 value 和 onChange 接口的 input 或者 inputComponent 设置 props。设置之后将会创建一个绑定在 input 上

<form>
  <input {...getFieldProps('name', { ...options })} />
</form>

name: String

这个 input 唯一的 name

option: Object

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

• force: Boolean -> 是否验证已经验证过的字段( 由于 validateTrigger 引起 )，默认值是 false
• scroll -> 和 dom-scroll-into-view's function parameter config 相同