Добавление компонента props в параметр props из обратного вызова reduxform - PullRequest
0 голосов
/ 29 марта 2019

Мне было интересно, возможен ли такой сценарий:

const MyComponent = ({props1, props2}) => (
  <div >
    // SOME STUFF using props1 and props2
  </div>
);


const ReduxFormWithMyComponent = reduxForm({
  form: 'test',
  onSubmitFail: (errors, dispatch, submitError, props) => {
    // here I would like to have access to props1 and props2 like:
    // const { props1, props2 } = props;
  },
  onSubmitSuccess: (result, dispatch, props) => {
    // same here:
    // const { props1, props2 } = props;
  },
})(MyComponent);

Итак, в принципе, мне нужно сделать некоторые условные вещи, основанные на значениях из props1 & props2 в onSubmitFail и onSubmitSuccess обратного вызова.

Согласно документации , я не видел никаких подробностей для этого.

Спасибо

1 Ответ

0 голосов
/ 02 апреля 2019

Я нашел решение моей проблемы, которое работает.Может быть полезно для людей, имеющих такую ​​же проблему.

Вот оно:

Ваш компонент должен быть похож на эту форму:

const MyComponent = ({handleSubmit, props1, props2}) => (
  <div >
  <form
    onSubmit={handleSubmit(data => myCustomSubmitFonction(data, {props1, props2}))}
  >
    // SOME STUFF using props1 and props2
  </form>
  </div>
);

Согласно избыточная документация , вы можете передать в качестве реквизита handleSubmit из reduxform.В результате вы можете указать в параметрах handleSubmit функции все, что захотите (В моем случае: props1 и props2)

Затем , myCustomSubmitFonction необходимо вернутьэто:

myCustomSubmitFonction(reduxFormData, myCustomData) {
    // reduxFormData useless in my case
    return myCustomData;
}

Теперь , я могу получить доступ к props1 и props2 через result (первый параметр):

const ReduxFormWithMyComponent = reduxForm({
  form: 'test',
  onSubmitFail: (errors, dispatch, submitError, props) => {
    const { props1, props2 } = result;
    // Yay !!
  },
  onSubmitSuccess: (result, dispatch, props) => {
    const { props1, props2 } = result;
    // Yay !!
  },
})(MyComponent);
...