You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/components/form.md
+5-6Lines changed: 5 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -42,7 +42,7 @@ To create interactive controls for submitting information, render the [built-in
42
42
* If you pass a function to `action`, React runs it in a [Transition](/reference/react/useTransition) following [the Action prop pattern](/reference/react/useTransition#exposing-action-props-from-components).
43
43
* The function may be async. React calls it with a single argument containing the [form data](https://developer.mozilla.org/en-US/docs/Web/API/FormData) of the submitted form.
44
44
* A `formAction` prop on a `<button>`, `<input type="submit">`, or `<input type="image">` overrides this `action`.
45
-
*[`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method): A string. Specifies the [HTTP method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) (`get` or `post`). Defaults to `get`. Ignored when `action` is a function—see [Caveats](#caveats).
45
+
*[`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method): A string. Specifies the [HTTP method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) (`get` or `post`). Defaults to `get`. Ignored when `action` is a function.
46
46
*`onSubmit`: An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires when the form is submitted. If you also pass a function to `action`, both run unless you call `e.preventDefault()`. See [Handling form submission with an event handler](#handle-form-submission-with-an-event-handler).
47
47
48
48
#### Caveats {/*caveats*/}
@@ -67,7 +67,7 @@ export default function Search() {
67
67
e.preventDefault();
68
68
constform=e.target;
69
69
constformData=newFormData(form);
70
-
constquery=formData.get("query");
70
+
constquery=formData.get('query');
71
71
alert(`You searched for '${query}'`);
72
72
}
73
73
@@ -92,7 +92,7 @@ Reading form data with `onSubmit` works in every version of React and gives you
92
92
93
93
### Handling form submission with an action prop {/*handle-form-submission-with-an-action-prop*/}
94
94
95
-
Pass a function to the `action` prop to run it when the form is submitted. React calls the function with a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object containing the values of every input with a `name` attribute. Your inputs can be [uncontrolled](/reference/react-dom/components/input#reading-the-input-values-when-submitting-a-form)—you don't need `value`/`onChange` pairs, an `onSubmit` handler, or `e.preventDefault()`.
95
+
Pass a function to the `action` prop to run it when the form is submitted. React calls the function with a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object containing the values of every input with a `name` attribute. Your inputs can be [uncontrolled](/reference/react-dom/components/input#reading-the-input-values-when-submitting-a-form)-you don't need `value`/`onChange` pairs, an `onSubmit` handler, or `e.preventDefault()`.
96
96
97
97
When you pass a function to `action`, React:
98
98
@@ -108,7 +108,7 @@ Because the Action runs in a Transition, you can also use [`useActionState`](/re
108
108
```js src/App.js
109
109
exportdefaultfunctionSearch() {
110
110
functionsearch(formData) {
111
-
constquery=formData.get("query");
111
+
constquery=formData.get('query');
112
112
alert(`You searched for '${query}'`);
113
113
}
114
114
return (
@@ -169,7 +169,6 @@ function AddToCart({productId}) {
169
169
}
170
170
```
171
171
172
-
When `<form>` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Function](/reference/rsc/server-functions) is passed to the `<form>`'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
173
172
---
174
173
175
174
### Displaying a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
@@ -395,7 +394,7 @@ To learn more about updating state from a form Action, see the [`useActionState`
395
394
396
395
By default, the browser clears a form's input state after submission. Forms with a URL `action` follow this behavior, and React mirrors it when `action` is a function so the form behaves consistently before and after JavaScript loads.
397
396
398
-
When you pass a function to `action` or `formAction`, React resets the form's [uncontrolled fields](/reference/react-dom/components/input#reading-the-input-values-when-submitting-a-form) after the Action succeeds. This reset only affects uncontrolled fields-[inputs controlled with state](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable) are never cleared.
397
+
When you pass a function to `action` or `formAction`, React resets the form's [uncontrolled fields](/reference/react-dom/components/input#reading-the-input-values-when-submitting-a-form) after the Action succeeds. This reset only affects uncontrolled fields-[inputs controlled with state](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable) are not cleared.
399
398
400
399
<RecipestitleText="Examples of preserving form values"titleId="examples-preserve-form-values">
0 commit comments