JavaScript / 前端 / 译文 · 10月 7, 2020 0

rc-form

rc-form

React HOC高阶组件.

NPM version
build status
Test coverage
gemnasium deps
node version
npm download
Code Quality: Javascript
Total alerts

开发使用

npm install
npm start
open http://localhost:8000/examples/

特性

  • 支持 react.js 和 react-native
  • 使用 async-validator
    验证字段

    Install

rc-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);

在 React Native 中使用

查看代码例子

或者简单一点的例子:

import { createForm } from 'rc-form';

class Form extends React.Component {
  componentWillMount() {
    this.requiredDecorator = this.props.form.getFieldDecorator('required', {
      rules: [{required: true}],
    });
  }

  submit = () => {
    this.props.form.validateFields((error, value) => {
      console.log(error, value);
    });
  }

  render() {
    let errors;
    const { getFieldError } = this.props.form;
    return (
      <div>
        {this.requiredDecorator(
          <input
            onChange={
              // can still write your own onChange
            }
          />
        )}
        {(errors = getFieldError('required')) ? errors.join(',') : null}
        <button onClick={this.submit}>submit</button>
      </div>
    );
  }
}

export createForm()(Form);

createForm(option: Object) => (WrappedComponent: React.Component) => React.Component

选项参数 描述 数据类型 默认值
option.validateMessages async-validator 的预置消息 Object {}
option.onFieldsChange 字段改变时调用, 你可以传递字段到 redux store. (props, changed, all): void NOOP
option.onValuesChange value 值改变时调用. (props, changed, all): void NOOP
option.mapProps 当被包裹的组件获得新的props时调用。 (props): Object props => props
option.mapPropsToFields 从 props 中给字段赋值。可以用来从 redux store 中读取字段. (props): Object NOOP
option.fieldNameProp 指定 getFieldPropsname 参数在哪存储。 String
option.fieldMetaProp 在哪里存储 getFieldProps 的元数据。 String
option.fieldDataProp 在哪储存字段值 String
option.withRef(deprecated) 是否保存包裹组件的实例,使用 refs.wrappedComponent 来访问. boolean false

注意: rc-form@1.4.0 以后版本,使用 wrappedComponentRef 而不是 withRef。

class Form extends React.Component { ... }

// 弃用
const EnhancedForm = createForm({ withRef: true })(Form);
<EnhancedForm ref="form" />
this.refs.form.refs.wrappedComponent // => The instance of Form

// 推荐
const EnhancedForm = createForm()(Form);
<EnhancedForm wrappedComponentRef={(inst) => this.formRef = inst} />
this.formRef // => The instance of Form

(WrappedComponent: React.Component) => React.Component

createForm() 函数的返回值. 它会将具有以下成员的对象作为 prop 传递给包裹组件 WrappedComponent:

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

会传递给可视为输入框组件一系列 props,该组件必须实现 value 和 onchange 接口

设置好只有, 这将创建与此输入的绑定。.

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

name: String

输入框的唯一 name 字段。即输入框的值将会被赋值给的键名

选项参数: Object

选项参数 描述 类型 默认值
option.valuePropName 组件 value 的来源, 例如: checkbox 应该设置为 checked String 'value'
option.getValueProps 根据字段值,获取输入框组件的 props (value): Object (value) => ({ value })
option.getValueFromEvent 指定如何从事件中获取值。可以把 onChange 的参数(如 event)转化为控件的值 (e): any See below
option.initialValue 当前组件的初始值。 any
option.normalize 返回标准化处理后的值。 (value, prev, all): Object
option.trigger 收集表单数据的时机。 String ‘onChange’
option.validateTrigger 监听验证的事件。 设置为 false 仅在调用props.validateFields时验证。 String String[] ‘onChange’
option.rules 验证规则。 详见: async-validator Object[]
option.validateFirst 当某一规则校验不通过时,是否停止剩下的规则的校验 boolean false
option.validate Object[]
option.validate[n].trigger option.validateTrigger String String[] ‘onChange’
option.validate[n].rules option.rules Object[]
option.hidden 在验证或获取字段时忽略当前字段 boolean false
option.preserve 即便字段不再使用,也保留该字段的值 boolean false
getValueFromEvent 的默认值
function defaultGetValueFromEvent(e) {
  if (!e || !e.target) {
    return e;
  }
  const { target } = e;
  return target.type === 'checkbox' ? target.checked : target.value;
}
技巧
{
  validateTrigger: 'onBlur',
  rules: [{required: true}],
}
// 是以下的简化
{
  validate: [{
    trigger: 'onBlur',
    rules: [{required: true}],
  }],
}

getFieldDecorator(name:String, option: Object) => (React.Node) => React.Node

getFieldProps 一样, 但添加一些帮助警告,你可以直接在React.Node道具中编写onXX:

<form>
  {getFieldDecorator('name', otherOptions)(<input />)}
</form>

getFieldsValue([fieldNames: String[]])

通过字段名来获取该字段的值。

getFieldValue(fieldName: String)

通过字段名来获取该字段的值。

getFieldInstance(fieldName: String)

通过字段名来获取对应输入框组件的实例。

setFieldsValue(obj: Object)

按key-value对象设置字段值。

setFieldsInitialValue(obj: Object)

通过key-value对象设置字段初始值initialValue。用于重置和初始显示值。

setFields(obj: Object)

按kv对象设置字段名。每个字段都可以包含错误和值成员。

validateFields([fieldNames: String[]], [options: Object], callback: (errors, values) => void)

通过fieldNames验证并获取字段值。

async-validator中的方法参数是一样的。
同时添加了 force and scroll. scrolldom-scroll-into-view’s function parameter 配置一样.

options.force: Boolean

默认 false。是否验证已验证的字段(由validateTrigger引起)。

getFieldsError(names): Object{ [name]: String[] }

获取输入组件的验证错误。

getFieldError(name): String[]

获取输入组件的验证错误。

isFieldValidating(name: String): Bool

此输入是否有效。

isFieldsValidating(names: String[]): Bool

其中一个输入是否有效。

isFieldTouched(name: String): Bool

其中一个输入值是否已被用户更改。

isFieldsTouched(names: String[]): Bool

其中一个输入值是否已被用户更改。

resetFields([names: String[]])

重置指定的输入。默认为全部。

isSubmitting(): Bool (Deprecated)

表单是否正在提交。

submit(callback: Function) (Deprecated)

原因是提交返回true,在调用callback之后,isSubmitting返回false。

rc-form/lib/createDOMForm(option): Function

createDOMForm 增强, 支持 props.form.validateFieldsAndScroll

validateFieldsAndScroll([fieldNames: String[]], [options: Object], callback: (errors, values) => void)

props.form.validateFields 增强, 支持支持滚动到第一个无效的表单字段

options.container: HTMLElement

默认为表单字段的第一个可滚动容器(直到文档)。

注意

<input {...getFieldProps('change',{
  onChange: this.iWantToKnow // you must set onChange here or use getFieldDecorator to write inside <input>
})}>
  • 你不能使用getFieldProps设置ref字段
<input {...getFieldProps('ref')} />

this.props.form.getFieldInstance('ref') // use this to get ref

或者

<input {...getFieldProps('ref',{
  ref: this.saveRef // use function here or use getFieldDecorator to write inside <input> (only allow function)
})} />

测试案例

npm test
npm run chrome-test

覆盖

npm run coverage

open coverage/ dir

冀ICP备19028007号