diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index 1043b13a0de..2cd658918e1 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -50,6 +50,34 @@ To create interactive controls for submitting information, render the [built-in ### Handle form submission on the client {/*handle-form-submission-on-the-client*/} +### Preventing unwanted form reset {/*preventing-form-reset*/} + +When a function is passed to the `action` prop, uncontrolled form fields are automatically reset after a successful submission. + +If you need to preserve the form input values, you can control the inputs using React state or use `onSubmit` with `event.preventDefault()`. + +```jsx +import { useState } from "react"; + +export default function Form() { + const [value, setValue] = useState(""); + + function handleSubmit(e) { + e.preventDefault(); + } + + return ( +
+ setValue(e.target.value)} + /> + +
+ ); +} + Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. After the `action` function succeeds, all uncontrolled field elements in the form are reset.