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
{{ message }}
Repository navigation
Commit a975b2e
Browse filesBrowse the repository at this point in the historyBrowse files
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/components/form.md
+7-9Lines changed: 7 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -86,7 +86,7 @@ export default function Search() {
86
86
87
87
<Note>
88
88
89
-
`onSubmit` works in every version of React and gives you direct access to the [submit event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event). Starting in React 19, the [`action` prop](#handle-form-submission-with-an-action-prop) is the preferred API for form submissions, because React handles the submission in a [Transition](/reference/react/useTransition), with pending state, optimistic updates, handles concurrency across multiple submissions, Error Boundaries, and [Server Functions](/reference/rsc/server-functions).
89
+
`onSubmit` works in every version of React and gives you direct access to the [submit event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event). Starting in React 19, the [`action` prop](#handle-form-submission-with-an-action-prop) is the preferred API for form submissions. With `action`, React manages pending state and concurrency across multiple submissions. You can also use optimistic updates, Error Boundaries, and [Server Functions](/reference/rsc/server-functions).
90
90
91
91
</Note>
92
92
@@ -98,7 +98,7 @@ Pass a function to the `action` prop to run it when the form is submitted. React
98
98
99
99
When you pass a function to `action`, React:
100
100
101
-
* Runs the function in a [Transition](/reference/react/useTransition), keeping the page responsive.
101
+
* Runs the function in a [Transition](/reference/react/useTransition).
102
102
* Makes the pending state available to child components via [`useFormStatus`](/reference/react-dom/hooks/useFormStatus).
103
103
* Propagates any errors to the nearest Error Boundary.
104
104
* Resets the form's uncontrolled fields when the function succeeds. To keep their values, see [Preserving form values after an Action](#preserve-form-values-after-an-action).
@@ -128,7 +128,7 @@ export default function Search() {
128
128
129
129
### Handling form submission with a Server Function {/*handle-form-submission-with-a-server-function*/}
130
130
131
-
A `<form>`'s `action` prop can run a Server Function (a function marked with [`'use server'`](/reference/rsc/use-server)) when the user submits the form. Users can submit that form before JavaScript loads, and when JavaScript is disabled. This matches how forms behave when you pass a URL to `action`.
131
+
A `<form>`'s `action` prop can run a Server Function (a function marked with [`'use server'`](/reference/rsc/use-server)) when the user submits the form. Users can submit that form before JavaScript loads or when JavaScript is disabled. This matches how forms behave when you pass a URL to `action`.
132
132
133
133
React calls the Server Function with the form's [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) and includes every input with a `name` attribute. To pass additional data, such as an ID from props, see [Passing extra data to an Action](#passing-extra-data-to-an-action).
134
134
@@ -219,7 +219,7 @@ function AddToCart({ productId }) {
219
219
220
220
#### A function in the component {/*passing-extra-data-function*/}
221
221
222
-
Define the function you pass to `action` in the Client Component that has the props or state. That function reads those values and passes them to a Server Function.
222
+
Define the function passed to `action` in the Client Component so it can read the component's props or state. That function passes those values to a Server Function.
223
223
224
224
```jsx
225
225
// AddToCart.js
@@ -360,7 +360,7 @@ export default function App() {
360
360
361
361
```js src/actions.js
362
362
exportasyncfunctiondeliverMessage(message) {
363
-
//mocking a delay to simulate message delivery
363
+
//Simulate a message delivery delay
364
364
awaitnewPromise((res) =>setTimeout(res, 1000));
365
365
return message;
366
366
}
@@ -537,7 +537,7 @@ export default function EditForm() {
537
537
538
538
</Sandpack>
539
539
540
-
Call a Server Function from `saveAction`, then store the string it returns. Because `saveAction` is defined in the Client Component, users can submit this form only after JavaScript loads:
540
+
Call a Server Function from `saveAction`, then store its return value in state. Because `saveAction` is defined in the Client Component, users can submit this form only after JavaScript loads:
541
541
542
542
```js
543
543
// actions.js
@@ -604,17 +604,15 @@ A form can have more than one submit button, each running a different Action. A
604
604
import { useActionState } from'react';
605
605
606
606
exportdefaultfunctionArticleForm() {
607
-
//Hold the saved draft in state so the textarea keeps its content after saving
Copy file name to clipboardExpand all lines: src/content/reference/react/useActionState.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1245,7 +1245,7 @@ When validation fails, `updateName` returns an error and the submitted `FormData
1245
1245
1246
1246
<RSC>
1247
1247
1248
-
When the `reducerAction` passed to `useActionState` is a [Server Function](/reference/rsc/server-functions), pass the returned `submitAction` to the form's `action` prop. React can then display the Server Function's returned value before hydration completes. Return the submitted `FormData` and use it to set each field's `defaultValue` to preserve those values before JavaScript loads. On pages with dynamic content, you can also use the optional `permalink` parameter for progressive enhancement. This is typically handled by your framework for you.
1248
+
When the `reducerAction` passed to `useActionState` is a [Server Function](/reference/rsc/server-functions), pass the returned `submitAction` to the form's `action` prop. React can then display the Server Function's returned value before hydration completes. Return the submitted `FormData` and use it to set each field's `defaultValue` to preserve those values before JavaScript loads. On pages with dynamic content, you can also use the optional `permalink` parameter for progressive enhancement.
0 commit comments