Форма Redux, откуда берутся VALUES? - PullRequest
Новая
       5

Форма Redux, откуда берутся VALUES?

0 голосов
/ 19 марта 2019

Итак, в основном я пытаюсь следовать следующему примеру и внедрить его в свой проект. Но я запутался, как вы можете видеть, когда отправляется WizardFormThirdPage.js, вызывается функция showResults. Когда я смотрю на showResults.js, в него передаются значения, но я не знаю, откуда это происходит и как получаются значения для данных формы, может кто-нибудь объяснить мне это?

https://codesandbox.io/s/0Qzz3843

Ответы [ 2 ]

1 голос
/ 19 марта 2019

Если у вас есть инструменты разработки Redux, вы можете видеть, что все значения, принадлежащие одной и той же форме (как в этом примере формы мастера), добавляются в свойство wizard.values. Это свойство get возвращается на handleSubmit и передается в showResults.записывается как 

<WizardForm onSubmit={showResults} />

и что showResults получает это значение, его также можно записать как 

<WizardForm onSubmit={(values)=>showResults(values)} />

, может быть, это немного более ясный способ сделать это.

и я предполагаю, что handleSubmit (из redux-form) берет значения из хранилища redux и делает что-то вроде этого 

handleSubmit=(someValues)=>{
  // some your property that handles values
  this.props.yourOnSubmit(someValues);
}

, где handleSubmit просто использует ваш onSubmit как функцию обратного вызова с аргументом values ​​и вызывает его со значениями.

1 голос
/ 19 марта 2019

На всех трех страницах WizardForm onSubmit не предоставляется React, но функция переопределяется Redux-формой: https://redux -form.com / 8.1.0 / docs / api / reduxform.md / # -кода-onsubmit-функция-кода optional- . Он предоставляет несколько параметров, среди которых есть values, который состоит из всех значений в форме wizard.

Таким образом, на страницах 1 и 2 обработчик для onSubmit является функцией nextPage, которая игнорирует все параметры, а для страницы 3 обработчик showResults принимает только параметр values.

Вы можете поиграть, изменив функцию showResults: 

export default (async function showResults(...args) {
  await sleep(500); // simulate server latency
  window.alert(JSON.stringify(args));
});

, который будет отображать все параметры, как показано в ссылке выше.

...