rc-form@2.4.12

React High Order Form Component

/* eslint react/no-multi-comp:0, no-console:0 */
import { createForm, formShape } from 'rc-form';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { regionStyle, errorStyle } from './styles';
function Email(props) {
 const { getFieldProps, getFieldError, isFieldValidating } = props.form;
 const errors = getFieldError('email');
 return (<div style={ regionStyle }>
 <div>email sync validate</div>
 <div>
 <input {...getFieldProps('email', {
 initialValue: '',
 validateFirst: true,
 rules: [
 {
 required: true,
 },
 {
 type: 'email',
 message: '错误的 email 格式',
 },
 ],
 })}
 />
 </div>
 <div style={errorStyle}>
 {errors ? errors.join(',') : null}
 </div>
 <div style={errorStyle}>
 {isFieldValidating('email') ? 'validating' : null}
 </div>
 </div>);
}
Email.propTypes = {
 form: formShape,
};
class User extends React.Component {
 static propTypes = {
 form: formShape,
 };
 userExists = (rule, value, callback) => {
 setTimeout(() => {
 if (value === '1') {
 callback([new Error('are you kidding?')]);
 } else if (value === 'yiminghe') {
 callback([new Error('forbid yiminghe')]);
 } else {
 callback();
 }
 }, 300);
 }
 render() {
 const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;
 const errors = getFieldError('user');
 return (<div style={ regionStyle }>
 <div>user async validate</div>
 <div>
 <input {...getFieldProps('user', {
 initialValue: '',
 rules: [
 {
 required: true,
 min: 2,
 },
 {
 validator: this.userExists,
 },
 ],
 })}
 />
 </div>
 <div style={errorStyle}>
 {(errors) ? errors.join(',') : null}
 </div>
 <div style={errorStyle}>
 {isFieldValidating('user') ? 'validating' : null}
 </div>
 </div>);
 }
}
class Form extends Component {
 static propTypes = {
 form: formShape,
 };
 onSubmit = (e) => {
 console.log('submit');
 e.preventDefault();
 this.props.form.validateFields({
 // firstFields: false,
 }, (error, values) => {
 if (!error) {
 console.log('ok', values);
 } else {
 console.log('error', error, values);
 }
 });
 };
 reset = (e) => {
 e.preventDefault();
 this.props.form.resetFields();
 };
 render() {
 const { form } = this.props;
 return (<div style={{ margin: 20 }}>
 <h2>validateFirst</h2>
 <form onSubmit={this.onSubmit}>
 <User form={ form }/>
 <Email form={ form }/>
 <div style={ regionStyle }>
 <button onClick={this.reset}>reset</button>
 &nbsp;
 <input type="submit" value="submit"/>
 </div>
 </form>
 </div>);
 }
}
const NewForm = createForm()(Form);
ReactDOM.render(<NewForm />, document.getElementById('__react-content'));