diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index 1043b13a0de..2af1924a6dd 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -71,6 +71,51 @@ export default function Search() { +### Keep form values after submission {/*keep-form-values-after-submission*/} + +When a function is passed to the `action` prop, React resets all uncontrolled field elements in the form after the action succeeds. + +If you want to preserve the current form values after submission, use `onSubmit` instead of `action`. You can prevent the default form submission behavior and call your action manually inside a Transition. + + + +```js src/App.js +import { useTransition } from "react"; + +export default function Search() { + const [isPending, startTransition] = useTransition(); + + async function search(formData) { + const query = formData.get("query"); + alert(`You searched for '${query}'`); + } + + function handleSubmit(event) { + event.preventDefault(); + + const formData = new FormData(event.target); + + startTransition(() => { + search(formData); + }); + } + + return ( +
+ + +
+ ); +} +``` + +
+ +Using `onSubmit` preserves the browser's default behavior of leaving form values unchanged after submission while still allowing the submission logic to run in a Transition. + + ### Handle form submission with a Server Function {/*handle-form-submission-with-a-server-function*/} Render a `
` with an input and submit button. Pass a Server Function (a function marked with [`'use server'`](/reference/rsc/use-server)) to the `action` prop of form to run the function when the form is submitted.