0

Написал небольшой hoc для react-final-form.

const withForm = (validate, getInitialValues = noop) => (WrappedForm) => {
  const EnhacedForm = ({ onSubmit, ...ownProps }) => (
    <ReactFinalForm
      validate={validate}
      initialValues={getInitialValues(ownProps)}
      render={renderProps => <WrappedForm {...ownProps} {...renderProps} />}
      onSubmit={onSubmit}
    />
  );

  return EnhacedForm;
};

Используется так:

const SignIn = ({ handleSubmit }) => (
  <Form onSubmit={handleSubmit}>
    <Username />
    <Password />
    <Button type="submit">Войти<Button/>
  </Form>
);

export default withForm()(SignInForm);

Если для формы требуются initialValues то нужно имплементировать getInitialValues.

function mapStateToProps(state) {
  return { phone: state.user.phone };
}

function getInitialValues(ownProps) {
  return { phone: 'here is my phone from redux state' };
}

export default connect(mapStateToProps)(
  form(null, getInitialValues)(SignInForm),
);

Возник вопрос как получить initialValues данные из redux?

1 ответ 1

1

Приветствую. Вот пример для достижения макс. гибкости. Хотя по сути я просто скопировал схему работы redux-form, возможно лучше глянуть их исходники.

// чтобы дальше было понятней
type WithFormOptions = {
    onSubmit?: () => any;
    initialValues?: any;
    validate?: () => any;
    onSubmitFail?: () => any; // для примера в самом конце
}


const withForm = (options: WithFormOptions) => (WrappedForm) => {
  return ({ onSubmit, initialValues, validate, ...ownProps }) => {
      const ownFormProps = { onSubmit, initialValues, validate};
      const formProps = { ...ownFormProps, ...options };          
      // или может так:  ...options, ...ownFormProps };

      return (
        <ReactFinalForm
           {...formProps}
           render={renderProps => <WrappedForm {...ownProps} {...renderProps}
        />
      );
   }

};

Форма без обёрток, так как обёртки скорее лучше запулить в контейнере

export const SignInForm = ({ handleSubmit }) => (
  <Form onSubmit={handleSubmit}>
    <Username />
    <Password />
    <Button type="submit">Войти<Button/>
  </Form>
);

export default SignInForm;

Далее контейнер я бы сделал так

export default compose(
    connect(s => ({ initialValues: ....})),
    withForm({
        onSubmit: () => ...,
        validate: () => ...,
    })
)(SignInForm)

Дальше вызываем контейнер, к примеру даже так:

<SignInFormContainer onSubmitFail={console.warn} />
2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.