Skip to content

Commit cfb4422

Browse files
committed
updates based on pr feedback
1 parent a3cd240 commit cfb4422

1 file changed

Lines changed: 6 additions & 3 deletions

File tree

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

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,16 @@ To create interactive controls for submitting information, render the [built-in
5151

5252
### Handling form submission with an event handler {/*handle-form-submission-with-an-event-handler*/}
5353

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

5656

5757
<Sandpack>
5858

5959
```js src/App.js
6060
export default function Search() {
6161
function handleSubmit(e) {
62+
// Prevent the browser from reloading the page
63+
e.preventDefault();
6264
const form = e.target;
6365
const formData = new FormData(form);
6466
const query = formData.get("query");
@@ -378,7 +380,7 @@ Learn more about updating state from a form Action with the [`useActionState`](/
378380

379381
### Preserving form values after submission {/*preserve-form-values-after-submission*/}
380382

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

383385
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.
384386

@@ -425,7 +427,8 @@ export async function submitForm(previousState, formData) {
425427

426428
#### `onSubmit` and `action` {/*with-onsubmit-and-usetransition*/}
427429

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.
431+
429432

430433
<Sandpack>
431434

0 commit comments

Comments
 (0)