<
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'
));
复制代码
上面的例子直接调用了rc-form的createForm方法，第一个参数配置对象未传递，第二个参数是需要被修饰的业务组件
在createForm方法中只是定义了mixin，接着继续调用了最主要的createBaseForm：
function createBaseForm(options={}, mixins={} ) {
const {
mapPropsToFields,
onFieldsChange,
withRef,
} = option;
return funciton decorate(WrappedComponent) {
const Form = createReactClass({
mixins,
getInitialState(){},
componentWillReceiveProps(nextProps){},
onCollect(){},
onCollectCommon() {},
getCacheBind() {},
getFieldDecorator() {},
getFieldProps() {}
render() {
const { wrappedComponentRef, ...restProps } = this.props;
const formProps = {
[formPropName]: this.getForm(),
const props = mapProps.call(this, {
...formProps,
...restProps,
return <WrappedComponent {...props}/>;
return argumentContainer(Form, WrappedComponent);
产生一个新容器组件Form，内置getFieldDecorator、getFieldProps等属性和方法
复制被包裹组件的静态属性到新的组建中，执行生命周期时间，getInitialState初始化默认的field,默认无
最后返回被注入了Form组件的原始组件
getFieldDecorator
getFieldDecorator(name, fieldOption) {
const props = this.getFieldProps(name, fieldOption);
return (fieldElem) => {
const fieldMeta = this.fieldsStore.getFieldMeta(name);
const originalProps = fieldElem.props;
fieldMeta.originalProps = originalProps;
fieldMeta.ref = fieldElem.ref;
return React.cloneElement(fieldElem, {
...props,
...this.fieldsStore.getFieldValuePropValue(fieldMeta),
getFieldProps(name, usersFieldOption = {}) {
const fieldOption = {
name,
trigger: DEFAULT_TRIGGER,
valuePropName: 'value',
validate: [],
...usersFieldOption,
const {
rules,
trigger,
validateTrigger = trigger,
validate,
} = fieldOption;
const fieldMeta = this.fieldsStore.getFieldMeta(name);
const inputProps = {
...this.fieldsStore.getFieldValuePropValue(fieldOption),
ref: this.getCacheBind(name, `${name}__ref`, this.saveRef),
const validateRules = normalizeValidateRules(validate, rules, validateTrigger);
const validateTriggers = getValidateTriggers(validateRules);
validateTriggers.forEach((action) => {
if (inputProps[action]) return;
inputProps[action] = this.getCacheBind(name, action, this.onCollectValidate);
const meta = {
...fieldMeta,
...fieldOption,
validate: validateRules,
this.fieldsStore.setFieldMeta(name, meta);
return inputProps;
复制代码
将表单项包装为高阶组件
创建表单信息到fieldsStore
绑定默认的onChange事件
保存结果到fieldsStore
返回双向数据绑定的input组件
在上述getFieldProps中onChange绑定了onCollect方法,
当change事件发生时，获取表单项的改变值，有校验规则的表单项添加{dirty:true}属性，调用validateFieldsInternal方法校验该表单项，将结果保存到fieldsStore，触发forceUpdate来重绘表单
onCollect(name_, action, ...args) {
const { name, field, fieldMeta } = this.onCollectCommon(name_, action, args)
const { validate } = fieldMeta
const newField = {
...field,
dirty: hasRules(validate),
this.setFields({
[name]: newField,
复制代码
Form内部有自己的状态管理：fieldsStore记录着所有表单项的信息，通过getFieldDecorator和表单进行双向绑定。
onChange触发onCollect来改变fieldStore中的值并触发forceUpdate来更新，onCollectCommon方法内部展示了onCollect取值的细节，forceUpdate在更新组件后，触发render方法，接着又回到一开始getFieldDecorator中获取fieldStore内的值，返回被修改后的组件的流程。
