React 初探之 rc-form

概述

当使用 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	Description	Type	Default
option.valuePropName	组件 value 字段的属性名称，eg. checkbox 应该设置为 checked	String	'value'
option. getValueProps	从 value 字段中获取组件 props	(value): Object	(value) => ({value})
option.initialValue	当前组件的初始值	any	-
option. normalize	返回标准化值	(value, prev, all): Object	-
option.trigger	用于收集表单数据的事件	String	'onChange'
option.validateTrigger	被监听已验证的事件，设置为 falsy 以仅在调用 props.validateFields 时验证	String	String[]
option.rules	验证规则，详情	Object[]	-
option.validateFirst	是否停止验证这个字段的第一个 error 规则	Boolean	false
option.validate		Object[]	-
option.hidden	忽略当前字段当验证或者获取这个字段时	Boolean	false
option.preserve	是否保留该值，当字段卸载并重新安装时，该值将保持不变	Boolean	false
option.getValueFromEvent	指定如何从事件中获取值	(e): any	详情见下面

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 相同