Как установить форму как нетронутую после успешной отправки в React Final Form

Как разработчик я хотел бы отключить кнопку «Отправить», когда пользователь успешно отправил форму с помощью React Final Form, и включить кнопку «Отправить», если пользователь вводит новый текст в форму.

Текущий

Переменная pristine устанавливает для параметра disable значение true только тогда, когда форма загружается в первый раз, но когда пользователь отправляет форму (не перезагружая страницу), переменная pristine равна false, и я ожидаю, что она будет true, чтобы отключить "Отправить " кнопка.

Желаемое поведение

  • При первой загрузке формы кнопка «Отправить» неактивна.
  • Кнопка «Отправить» активируется, когда пользователь вводит текст или вносит изменения.
  • Кнопка «Отправить» неактивна после того, как пользователь нажал «Отправить» и она была успешной.
  • Кнопка «Отправить» должна быть включена, если пользователь вводит дополнительные изменения после отправки.

Пример текущего поведения

https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/simple

Мое расследование

Я попытался использовать комбинацию следующих переменных, предоставленных Final Form, но безуспешно pristine, touched, submitSucceeded, lastSubmittedValues


reactjs javascript forms react-final-form final-form
person Matt    schedule 29.02.2020    source источник
comment
у тебя есть код?   -  person ezra    schedule 29.02.2020
comment
@ezra Я предоставил код, он здесь: codeandbox.io/s/github/final-form/react-final-form/tree/master/   -  person Matt    schedule 29.02.2020

Ответы (1)


arrow_upward
4
arrow_downward

Для этого вам нужно будет «повторно инициализировать» форму после отправки.

После успешной отправки вам нужно будет передать эти отправленные значения формы обратно в свойство initialValues на <Form/>. Это гарантирует, что ваше pristine значение точно отражает значения, которые были сохранены / отправлены.

Если вы это сделаете, pristine должно быть единственным значением, которое ваша кнопка отправки должна знать, должна ли она быть отключена или нет.

Примечание. Используйте этот шаблон только в формах, которые редактируют существующие данные. Причина в том, что если вы начинаете с пустой формы и у вас есть обязательные поля, попытка отправки полезна тем, что она пометит все поля как touched, чтобы вы могли отображать сообщения об ошибках. Но если вы отключите кнопку отправки на pristine, вы не сможете получить это преимущество.

person Erik R.    schedule 02.03.2020
comment
Спасибо за решение; как насчет отправки новых данных, и в моем случае я не могу отключить кнопку отправки после отправки формы в обоих случаях после отправки существующих данных и после отправки свежих данных - person Enigma State; 02.07.2021