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
+6-3Lines changed: 6 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -51,14 +51,16 @@ To create interactive controls for submitting information, render the [built-in
51
51
52
52
### Handling form submission with an event handler {/*handle-form-submission-with-an-event-handler*/}
53
53
54
-
Pass a function to the `onSubmit` event handler to run code when the form is submitted. By default, the browser sends the form data to the current URL and refreshes the page. Call[`e.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) in your handler to override that behavior.
54
+
Pass a function to the `onSubmit` event handler to run code when the form is submitted. By default, the browser sends the form data to the current URL and refreshes the page. Calling[`e.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) in the event handler overrides this behavior.
55
55
56
56
57
57
<Sandpack>
58
58
59
59
```js src/App.js
60
60
exportdefaultfunctionSearch() {
61
61
functionhandleSubmit(e) {
62
+
// Prevent the browser from reloading the page
63
+
e.preventDefault();
62
64
constform=e.target;
63
65
constformData=newFormData(form);
64
66
constquery=formData.get("query");
@@ -378,7 +380,7 @@ Learn more about updating state from a form Action with the [`useActionState`](/
378
380
379
381
### Preserving form values after submission {/*preserve-form-values-after-submission*/}
380
382
381
-
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-ensuring your form behaves consistently both before and after JavaScript loads.
383
+
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, ensuring your form behaves consistently both before and after JavaScript loads.
382
384
383
385
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.
384
386
@@ -425,7 +427,8 @@ export async function submitForm(previousState, formData) {
425
427
426
428
#### `onSubmit` and `action` {/*with-onsubmit-and-usetransition*/}
427
429
428
-
Adding an `onSubmit` handler that calls `e.preventDefault()` will run instead of the `action` prop.
430
+
Calling `e.preventDefault()` in an `onSubmit` handler prevents the `action` prop from running. Without `e.preventDefault()`, both the `action` prop and the `onSubmit` handler will run.
0 commit comments