rc-form-demo：
import React from 'react';
import ReactDOM from 'react-dom';
import { createForm, formShape } from 'rc-form';
class Form extends React.Component {
static propTypes = {
form: formShape,
};
componentWillMount() {
this.nameDecorator = this.props.form.getFieldDecorator('name', {
initialValue: '',
rules: [{
required: true,
message: 'What\'s your name?',
}],
});
}
onSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((error, values) => {
if (!error) {
console.log('ok', values);
} else {
console.log('error', error, values);
}
});
};
onChange = (e) => {
console.log(e.target.value);
}
render() {
const { getFieldError } = this.props.form;
return (
<form onSubmit={this.onSubmit}>
{this.nameDecorator(
<input
onChange={this.onChange}
/>
)}
<div style={{ color: 'red' }}>
{(getFieldError('name') || []).join(', ')}
</div>
<button>Submit</button>
</form>
);
}
}
const WrappedForm = createForm()(Form);
ReactDOM.render(<WrappedForm />, document.getElementById('__react-content'));
在上面的业务中，第一个参数未传值，第二个参数是被修饰的业务组件，接着继续调用重要的createbBaseForm,
function createBaseForm(options={}, mixins={} ) {
const {
mapPropsToFields, // 页面初始化或重绘时，将组件接受到的props转变为表单项数据注入this.fields中
onFieldsChange, // 表单项发生改变时执行函数，可以将表单项的值存入redux.store
...
withRef, // 设定被封装组件的ref属性为"wrappedComponent"
} = option;
//这里的WrappenComponent就是一开始例子中的Form组件
return funciton decorate(WrappedComponent) {
const Form = createReactClass({
mixins,
getInitialState(){}, // 初始化组件state
componentWillReceiveProps(nextProps){}, // mark-recProps,初始化部分数据
onCollect(){}, // 收集表单数据
onCollectCommon() {},
getCacheBind() {}, // 组件事件绑定等收集
getFieldDecorator() {}, // 装饰组件，促进双向绑定的修饰器
getFieldProps() {} // 设置字段元数据，计算被修饰组件的属性
...
render() {
const { wrappedComponentRef, ...restProps } = this.props;
const formProps = {
[formPropName]: this.getForm(), // createForm mixin
};
// 其中mapProps函数就是一个function(obj) {return obj};
// 这里用了一个小技巧，就是call(this,xxx),直接将该组件上的核心方法，全都放到了子组件的属性上，而且由于该组件是createReactClass创建的，所以子组件(本例中的Form)调用这些从父组件获取的方法时，方法内部的this,指向当前组件。
const props = mapProps.call(this, {
...formProps,
...restProps,
});
// 把form属性挂在到WrappedComponent属性上
return <WrappedComponent {...props}/>;
},
},
})
// 复制包裹组件的静态属性到Form上
return argumentContainer(Form, WrappedComponent);
}
}
产生一个新容器组件Form，内置getFieldDecorator、getFieldProps等属性和方法
复制被包裹组件的静态属性到新的组建中，执行生命周期时间，getInitialState初始化默认的field,默认无
最后返回被注入了Form组件的原始组件
