gem-hunter

rc-form

Development

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

Feature

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 {...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);

Use with 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

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

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

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

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

name: String

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

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

getFieldsValue([fieldNames: String[]])

getFieldValue(fieldName: String)

getFieldInstance(fieldName: String)

setFieldsValue(obj: Object)

setFieldsInitialValue(obj: Object)

setFields(obj: Object)

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

options.force: Boolean

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)

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

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

options.container: HTMLElement

Notes

<input {...getFieldProps('change',{
  onChange: this.iWantToKnow // you must set onChange here or use getFieldDecorator to write inside <input>
})}>

<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)
})} />

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

License