diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index 1043b13a0de..f5a3be81309 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -48,26 +48,34 @@ To create interactive controls for submitting information, render the [built-in ## Usage {/*usage*/} -### Handle form submission on the client {/*handle-form-submission-on-the-client*/} +### Preventing unwanted form reset -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. +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()`. -```js src/App.js -export default function Search() { - function search(formData) { - const query = formData.get("query"); - alert(`You searched for '${query}'`); +```jsx +import { useState } from "react"; + +export default function Form() { + const [value, setValue] = useState(""); + + function handleSubmit(e) { + e.preventDefault(); + // handle submit without resetting input } + return ( -
- - + + setValue(e.target.value)} + /> +
); } -```