To help you get started, we've collected the most common ways that rc-form is being used within popular public projects.

1067011734 / balibali / src / pages / User / model / step1.js View on Github

import React, { Component } from 'react'
import { List, InputItem, Switch, Stepper, Range, Button, Picker, Toast } from 'antd-mobile'
import Container from '@/components/Container'
import { createForm } from 'rc-form'
import PropTypes from 'prop-types'

const { Item } = List
@createForm()
class app extends Component {
  PropTypes = {
    onChange: PropTypes.func,
  }

  state = {
  }

  componentDidMount() {
    const { userInfo } = this.props
    const { name, dept } = userInfo
    // debugger
    this.props.form.setFieldsValue({
      name,
      dept: [dept],
    })

View more ways to use rc-form

rc-form

React High Order Form Component.

Development

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

Feature

• Support react.js and even react-native
• Validate fields with async-validator

Install

Usage

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>
        <input>
        {(errors = getFieldError('required')) ? errors.join(',') : null}
        <button>submit</button>
      </div>
    );
  }
}

export createForm()(Form);

Use with React Native

Expo preview

View the source code

Or a quicker version:

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>
        )}
        {(errors = getFieldError('required')) ? errors.join(',') : null}
        <button>submit</button>
      </div>
    );
  }
}

export createForm()(Form);

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

Note: use wrappedComponentRef instead of withRef after rc-form@1.4.0

class Form extends React.Component { ... }

// deprecated
const EnhancedForm = createForm({ withRef: true })(Form);

this.refs.form.refs.wrappedComponent // => The instance of Form

// Recommended
const EnhancedForm = createForm()(Form);
 this.formRef = inst} />
this.formRef // => The instance of Form

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

The returned function of createForm(). It will pass an object as prop form with the following members to WrappedComponent:

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

Will create props which can be set on a input/InputComponent which support value and onChange interface.

After set, this will create a binding with this input.

<form>
  <input>
</form>

name: String

This input's unique name.

option: Object

Default value of getValueFromEvent

function defaultGetValueFromEvent(e) {
  if (!e || !e.target) {
    return e;
  }
  const { target } = e;
  return target.type === 'checkbox' ? target.checked : target.value;
}

Tips

{
  validateTrigger: 'onBlur',
  rules: [{required: true}],
}
// is the shorthand of
{
  validate: [{
    trigger: 'onBlur',
    rules: [{required: true}],
  }],
}

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

Similar to getFieldProps, but add some helper warnings and you can write onXX directly inside React.Node props:

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

getFieldsValue([fieldNames: String[]])

Get fields value by fieldNames.

getFieldValue(fieldName: String)

Get field value by fieldName.

getFieldInstance(fieldName: String)

Get field react public instance by fieldName.

setFieldsValue(obj: Object)

Set fields value by kv object.

setFieldsInitialValue(obj: Object)

Set fields initialValue by kv object. use for reset and initial display/value.

setFields(obj: Object)

Set fields by kv object. each field can contain errors and value member.

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

Validate and get fields value by fieldNames.

options is the same as validate method of async-validator. And add force.

options.force: Boolean

Defaults to false. Whether to validate fields which have been validated(caused by validateTrigger).

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

Get inputs' validate errors.

getFieldError(name): String[]

Get input's validate errors.

isFieldValidating(name: String): Bool

Whether this input is validating.

isFieldsValidating(names: String[]): Bool

Whether one of the inputs is validating.

isFieldTouched(name: String): Bool

Whether this input's value had been changed by user.

isFieldsTouched(names: String[]): Bool

Whether one of the inputs' values had been changed by user.

resetFields([names: String[]])

Reset specified inputs. Defaults to all.

isSubmitting(): Bool (Deprecated)

Whether the form is submitting.

submit(callback: Function) (Deprecated)

Cause isSubmitting to return true, after callback called, isSubmitting return false.

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

createDOMForm enhancement, support props.form.validateFieldsAndScroll

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

props.form.validateFields enhancement, support scroll to the first invalid form field, scroll is the same as dom-scroll-into-view's function parameter config.

options.container: HTMLElement

Defaults to first scrollable container of form field(until document).

Notes

• Do not use stateless function component inside Form component: https://github.com/facebook/react/pull/6534

• you can not set same prop name as the value of validateTrigger/trigger for getFieldProps

<input>
})}&gt;

• you can not use ref prop for getFieldProps

<input>

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

or

<input> (only allow function)
})} /&gt;

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-form is released under the MIT license.