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

Question

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

Текущий

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

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

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

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

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

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

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

Answer 1

Чтобы выполнить sh, вам нужно будет повторно инициализировать форму после отправки.

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

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

---

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