rc-form（翻译）

原地址：https://npm.taobao.org/package/rc-form

rc-form

React 高阶表单控制组件。

NPM version build status Test coverage gemnasium deps node version npm download

开发

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

特征

安装

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 当字段名改变时调用, 可以dispatch字段到redux store. (props, changed, all): void NOOP
option.onValuesChange 当值改变时调用 (props, changed, all): void NOOP
option.mapProps 获取新的props 并转移到 WrappedComponent组件. (props): Object props => props
option.mapPropsToFields 将值从props 转换为字段. 用于redux store的可读字段. (props): Object NOOP
option.fieldNameProp 存储 getFieldProps 的 name 参数. String -
option.fieldMetaProp 存储 getFieldProps 的元数据（meta data）. String -
option.fieldDataProp 存储字段值 String -
option.withRef(deprecated) 维持wrapped component实例的ref,使用  refs.wrappedComponent  访问. boolean false

注意：在rc-form@1.4.0之后使用WrdabdCysEclipse代替ReffRef 

class Form extends React.Component { ... }

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

// Recommended
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] }

这将创建一个prop值，该值可以设置在支持值和onChange接口的input或InputComponent上。

设置之后，将在input上创建一个binding。

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

name: String

该input的唯一名称。

option: Object

选项描述类型默认值
option.valuePropName 组件的值的字段的prop名称,例如：checkbox的设置是checked String 'value'
option.getValueProps 通过字段值获取组件的props. (value): Object (value) => ({ value })
option.getValueFromEvent 指定如何从事件中获取值。 (e): any See below
option.initialValue 当前组件的值的初始化。 any -
option.normalize 返回正常的值. (value, prev, all): Object -
option.trigger 监听表单数据事件. String 'onChange'
option.validateTrigger 监听校验事件. 当只调用props.validateFields用于校验的时候设置. String String[]
option.rules 校验规则. 参考: async-validator Object[] -
option.validateFirst 是否停止对该字段的第一条错误规则进行校验。 boolean false
option.validate   Object[] -
option.validate[n].trigger 监听校验事件. 当只调用props.validateFields用于校验的时候设置. String String[]
option.validate[n].rules 校验规则. 参考: async-validator Object[] -
option.hidden 在验证或获取字段时忽略当前字段 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}],
}
// is the shorthand of
{
  validate: [{
    trigger: 'onBlur',
    rules: [required: true],
  }],
}

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

与 getFieldProps相似, 但是增加了一些帮助warning信息，可以直接在 React.Node props写 onXX :

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

getFieldsValue([fieldNames: String[]])

通过fieldNames获取字段值.

getFieldValue(fieldName: String)

通过fieldName获取字段值.

getFieldInstance(fieldName: String)

通过字段名称获取字段的公共实例。

setFieldsValue(obj: Object)

通过 kv object设置字段值.

setFieldsInitialValue(obj: Object)

通过KV对象设置字段初始值。用于重置和初始显示/值。

setFields(obj: Object)

用KV对象设置字段。每个字段的内容都可以包含错误信息和值。

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

通过fieldNames校验并获取字段值.

与async-validator的校验方法相同. 并且增加  force  and  scroll .  scroll   dom-scroll-into-view's 函数参数  config 相同.

options.force: Boolean

默认为false. 是否校验已经校验过的字段（由ValueTebug触发）。

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

获取input的校验错误信息.

getFieldError(name): String[]

获取input的校验错误信息.

isFieldValidating(name: String): Bool

该input是否已校验。

isFieldsValidating(names: String[]): Bool

是否有一个input校验。

isFieldTouched(name: String): Bool

这个input的值是否已经被用户改变了。

isFieldsTouched(names: String[]): Bool

是否有一个input的值已经被用户改变了。

resetFields([names: String[]])

重置指定的输入。默认为所有。

isSubmitting(): Bool (Deprecated)

表单是否已提交.

submit(callback: Function) (Deprecated)

由于提交返回true，调用callback后，提交返回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 prop
<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

打开coverage/ dir

许可证

rc-form是在MIT许可下发布的。

原地址：https://npm.taobao.org/package/rc-form

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/chaoxiZ/p/9364989.html