rc-form@2.4.12

React High Order Form Component

/* eslint no-console:0, react/jsx-no-bind:0 */
import { createForm, formShape } from 'rc-form';
import React from 'react';
import ReactDOM from 'react-dom';
import { regionStyle } from './styles';
let uuid = 0;
class Form extends React.Component {
 static propTypes = {
 form: formShape,
 };
 remove = (k) => {
 const { form } = this.props;
 // can use data-binding to get
 let keys = form.getFieldValue('keys');
 keys = keys.filter((key) => {
 return key !== k;
 });
 // can use data-binding to set
 form.setFieldsValue({
 keys,
 });
 }
 add = () => {
 uuid++;
 const { form } = this.props;
 // can use data-binding to get
 let keys = form.getFieldValue('keys');
 keys = keys.concat(uuid);
 // can use data-binding to set
 // important! notify form to detect changes
 form.setFieldsValue({
 keys,
 });
 }
 submit = (e) => {
 e.preventDefault();
 console.log(this.props.form.getFieldsValue());
 }
 render() {
 const { getFieldProps, getFieldValue } = this.props.form;
 getFieldProps('keys', {
 initialValue: [],
 });
 const inputs = getFieldValue('keys').map((k) => {
 return (<div key={k} style={ regionStyle }>
 <input {...getFieldProps(`name${k}`)}/>
 <a
 onClick={this.remove.bind(this, k)}
 >delete</a></div>);
 });
 return (<div>
 {inputs}
 <div style={ regionStyle }>
 <button onClick={this.submit}>submit</button>
 <button onClick={this.add}>add</button>
 </div>
 </div>);
 }
}
Form = createForm()(Form);
ReactDOM.render(<Form />, document.getElementById('__react-content'));