Skip to content

Commit ebe77b0

Browse files
committed
small cleanups
1 parent 378c7c3 commit ebe77b0

1 file changed

Lines changed: 5 additions & 6 deletions

File tree

  • src/content/reference/react-dom/components

src/content/reference/react-dom/components/form.md

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ To create interactive controls for submitting information, render the [built-in
4242
* 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).
4343
* 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.
4444
* 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.
4646
* `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).
4747

4848
#### Caveats {/*caveats*/}
@@ -67,7 +67,7 @@ export default function Search() {
6767
e.preventDefault();
6868
const form = e.target;
6969
const formData = new FormData(form);
70-
const query = formData.get("query");
70+
const query = formData.get('query');
7171
alert(`You searched for '${query}'`);
7272
}
7373

@@ -92,7 +92,7 @@ Reading form data with `onSubmit` works in every version of React and gives you
9292

9393
### Handling form submission with an action prop {/*handle-form-submission-with-an-action-prop*/}
9494

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()`.
9696

9797
When you pass a function to `action`, React:
9898

@@ -108,7 +108,7 @@ Because the Action runs in a Transition, you can also use [`useActionState`](/re
108108
```js src/App.js
109109
export default function Search() {
110110
function search(formData) {
111-
const query = formData.get("query");
111+
const query = formData.get('query');
112112
alert(`You searched for '${query}'`);
113113
}
114114
return (
@@ -169,7 +169,6 @@ function AddToCart({productId}) {
169169
}
170170
```
171171

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).
173172
---
174173

175174
### 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`
395394

396395
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.
397396

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.
399398

400399
<Recipes titleText="Examples of preserving form values" titleId="examples-preserve-form-values">
401400

0 commit comments

Comments
 (0)