Detailed explanation of React Form component encapsulation steps

<form class="form">

  <label class="label"/>

  <field class="field"/>

</form>

<!--行内布局-->

<form class="form inline">

  <label class="label"/>

  <field class="field"/>

</form>

<!--水平布局-->

<form class="form horizontal">

  <label class="label"/>

  <field class="field"/>

</form>

<!--垂直布局-->

<form class="form vertical">

  <label class="label"/>

  <field class="field"/>

</form>

.inline .label {

  display: inline-block;

  ...

}

.inline .field {

  display: inline-block;

  ...

}

.horizontal .label {

  display: inline-block;

  ...

}

.horizontal .field {

  display: inline-block;

  ...

}

.vertical .label {

  display: block;

  ...

}

.vertical .field {

  display: block;

  ...

}

export default Control => {

  render() {

    return (

      <p className={groupClassName}>

        <label className="zent-formcontrol-label">

          {required ? <em className="zent-formrequired">*</em> : null}

          {label}

        </label>

        <p className="zent-formcontrols">

          <Control {...props} {...controlRef} />

          {showError && (

            <p className="zent-formerror-desc">{props.error}</p>

          )}

          {notice && <p className="zent-formnotice-desc">{notice}</p>}

          {helpDesc && <p className="zent-formhelp-desc">{helpDesc}</p>}

        </p>

      </p>

     );                          

  }

}

<Field

  label="预约门店："

  name="dept"

  component={CustomizedComp}

  validations={{

    required: true,

  }}

  validationErrors={{

    required: '预约门店不能为空',

  }}

  required

/>

class FieldForm extends React.Component {

  render() {

    return (

      <Form>

        <Field

          name="name"

          component={CustomizedComp}

      </Form>

    )

  }

}

export default createForm()(FieldForm);

/**

 * createForm高阶函数

 */

const createForm = (config = {}) => {

  ...

  return WrappedForm => {

    return class Form extends Component {

      constructor(props) {

        super(props);

        this.fields = [];

      }

      getChildContext() {

        return {

          zentForm: {

            attachToForm: this.attachToForm,

            detachFromForm: this.detachFromForm,

          }

        }

      }

      attachToForm = field => {

        if (this.fields.indexOf(field) < 0) {

          this.fields.push(field);

        }

      };

      detachFromForm = field => {

        const fieldPos = this.fields.indexOf(field);

        if (fieldPos >= 0) {

          this.fields.splice(fieldPos, 1);

        }

      };

      render() {

        return createElement(WrappedForm, {...});

      }

    } 

  }

}

/**

 * Field组件

 */

class Field extends Component {

  componentWillMount() {

    this.context.zentForm.attachToForm(this);

  }

  componentWillUnmount() {

    this.context.zentForm.detachFromForm(this);

  }

  render() {

    const { component } = this.props;

    return createElement(component, {...});

  }

}

/**

 * createForm高阶函数

 */

const createForm = (config = {}) => {

  ...

  return WrappedForm => {

    return class Form extends Component {

      getFormValues = () => {

        return this.fields.reduce((values, field) => {

          const name = field.getName();

          const fieldValue = field.getValue();

          values[name] = fieldValue;

          return values;

        }, {});

       };

    } 

  }

}

/**

 * Field组件

 */

class Field extends Component {

  getValue = () => {

    return this.state._value;

  };

}

createForm({

  formValidations: {

    rule1(values, value){

    },

    rule2(values, value){

    },

  }

})(FormComp);

<Field

  validations={{

    rule1(values, value){

    },

    rule2(values, value){

    },

  }}

  validationErrors={{

    rule1: 'error1',

    rule2: 'error2'

  }}

/>

runRules = (value, currentValues, validations = {}) => {

  const results = {

    errors: [],

    failed: [],

  };

  function updateResults(validation, validationMethod) {

    // validation方法可以直接返回错误信息，否则需要返回布尔值表明校验是否成功

    if (typeof validation === 'string') {

      results.errors.push(validation);

      results.failed.push(validationMethod);

    } else if (!validation) {

      results.failed.push(validationMethod);

    }

  }

  Object.keys(validations).forEach(validationMethod => {

    ...

    // 使用自定义校验方法或内置校验方法（可以按需添加）

    if (typeof validations[validationMethod] === 'function') {

      const validation = validations[validationMethod](

        currentValues,

        value

      );

      updateResults(validation, validationMethod);

    } else {

      const validation = validationRules[validationMethod](

        currentValues,

        value,

        validations[validationMethod]

      );

    }

  });

  return results;

};

<Field

  validateOnChange={false}

  validateOnBlur={false}

  validations={{

    required: true,

    matchRegex: /^[a-zA-Z]+$/

  }}

  validationErrors={{

    required: '值不能为空',

    matchRegex: '只能为字母'

 }}

/>

class Field extends Component {

  handleChange = (event, options = { merge: false }) => {

    ...

    this.setValue(newValue, validateOnChange);

    ...

  }

  handleBlur = (event, options = { merge: false }) => {

    ...

    this.setValue(newValue, validateOnBlur);

    ...

  }

  setValue = (value, needValidate = true) => {

    this.setState(

      {

        _value: value,

        _isDirty: true,

      },

      () => {

        needValidate && this.context.zentForm.validate(this);

      }

    );

 };

}

const handleSubmit = (submit, zentForm) => {

  const doSubmit = () => {

    ...

    result = submit(values, zentForm);

    ...  

    return result.then(

      submitResult => {

        ...

        if (onSubmitSuccess) {

          handleOnSubmitSuccess(submitResult);

        }

        return submitResult;

      },

      submitError => {

        ...

        const error = handleSubmitError(submitError);

        if (error || onSubmitFail) {

          return error;

        }

        throw submitError;

      }

    );

  }

  const afterValidation = () => {

    if (!zentForm.isValid()) {

      ...

      if (onSubmitFail) {

       handleOnSubmitError(new SubmissionError(validationErrors));

      }

    } else {

      return doSubmit();

    }

  };

  const allIsValidated = zentForm.fields.every(field => {

    return field.props.validateOnChange || field.props.validateOnBlur;

  });

  if (allIsValidated) {

    // 不存在没有进行过同步校验的field

    afterValidation();

  } else {

    zentForm.validateForm(true, afterValidation);

  }

}

const { handleSubmit } = this.props;

<Form onSubmit={handleSubmit(this.submit)} horizontal>