React form 表单组件的解决方案

div.f-item
    label.f-label // 如果需要标注required，子元素还要加个required判断
    div.f-field
        div.f-element-wrap // 如果没有前后缀，可以不需要该层
            span.f-prefix // 前缀
            input.f-element // 输入框等表单元素
            span.f-suffix // 后缀
        p.f-description // 描述说明
        div.f-msg // 检验信息

div.f-item
    label.f-label // 如果需要标注required，子元素还要加个required判断
    span.f-prefix // 前缀
    input.f-element // 输入框等表单元素
    span.f-suffix // 后缀

<FormItem name="username" label="用户名" value={} onChange={} />
<FormItem name="id" label="证件类型" />
    {/* 选择框，单选多选，多个元素，自定义组件等使用 children 形式 */}
    <select value={} onChange={}></select>
    <input type="text" value="" onChange={}>
</FormItem>
<FormItem name="comnent" type="areatext" label="申诉" value={} onChange={} />

const FormContext = React.createContext({
  values: {},
  checkMsg: {},
  onChange: () => {},
});

  const {
    children, values, checkMsg, onChange, ...rest
  } = props;

  // 将传入values，checkMsg，onChange 设置为 context 值
  const value = {
    values,
    checkMsg,
    onChange,
  };

  return (
    <FormContext.Provider value={value} >
      <form {...rest} >
        {children}
      </form>
    </FormContext.Provider>
  );

export function withFormContext(Component) {
  return props => {
    const { name } = props;

    const { values, checkMsg, onChange } = useContext(FormContext);

    return (
      <Component
        value={values[name]}
        checkMsg={checkMsg[name]}
        onChange={onChange}
        {...props}
      />
    );
  };
}

const FormItemContext = withFormContext(FormItem);

export default FormItemContext;

// state
this.state = {
    values: {
        username: 'xxx',
        email: 'xxx',
    },
    formErr: {},
}

// change 事件
handleChange = (name, value, e) => {
    // 用户名验证
    if (name === 'username') {}
    // 邮箱验证
    if (name === 'email') {}
}

// 其他事件，如 blur 事件，因为是透传的，所以没有任何参数提供
handleBlur = () => {}

<Form values={this.state.values} checkMsg={this.state.formErr} onChange={this.handleChange}>
    <FormItemContext label="用户名" name="username" onBLur={this.handleBlur} />
    <FormItemContext label="邮箱" type="email" name="email" />
</Form>

export const initialState = {
  values: {}, // 值数据
  checkMsg: {}, // 校验信息数据
};

export function formState(state, action) {
  // action.type 的值为 values 或 checkMsg
  const { type, name, value, data } = action;

  // 提交前的全部校验，checkMsg 全部更新
  if (data) {
    return Object.assign({}, state, {
      [type]: data,
    });
  }

  // 单个values或checkMsg更新
  Object.assign(state[type], {
    [name]: value,
  });
  return { ...state };
}

// 对比之前的 values，checkMsg，onChange 三大属性，
// 这里改成了 defaultValues, formModel, onChange 三大属性
const { children, onChange, formModel, defaultValues, ...rest } = props;

  // 当该表单项的值未定义时才使用默认值
  if (defaultValues) {
    Object.keys(defaultValues).forEach(item => {
      if (initialState.values[item] === undefined) {
        initialState.values[item] = defaultValues[item];
      }
    });
  }

  const [state, dispatch] = useReducer(formState, initialState);
  const { values, checkMsg } = state;

  const contextValue = {
    values,
    checkMsg,
    formModel,
    dispatch,
    onChange,
  };

  return (
    <FormContext.Provider value={contextValue}>
      <form {...rest}>
        {children}
      </form>
    </FormContext.Provider>
  );

const changeHandler = (itemName, value, obj) => {
      let returnValue;
      if (onChange) {
        returnValue = onChange(name, value, obj);
      }

      // 如果没有返回值则更新数据
      if (returnValue === undefined) {
        dispatch({ type: 'values', name, value });
      } else if (returnValue !== 'noDispatch') {
        // 如果返回数据，且返回值不为noDispatch，则更新为返回值
        value = returnValue;
        dispatch({ type: 'values', name, value });
      }

      // 立即校验
      if (changeAutoCheck) {
        dispatch({ type: 'checkMsg', name, value: formModel.checkForField(name, value) });
      }
    };

    // 只有值和校验信息改变的时候才更新
    return useMemo(() => {
      return <Component value={values[name]} checkMsg={checkMsg[name]} onChange={changeHandler} {...formItemRest} />;
    }, [values[name], checkMsg[name]]);

// 提交之前先自动校验
      const submitHandler = () => {
        // 得到所有的校验数据
        const data = formModel.check(values);
        dispatch({ type: 'checkMsg', data });

        const hasError = Object.keys(data).find(item => {
          return data[item].hasError;
        });

        if (hasError === undefined && onClick) {
          onClick(values);
        }
      };