Skip to content

Commit 62f311a

Browse files
committed
Add example around disabling default form reset behaviour
1 parent d6c4c0f commit 62f311a

File tree

1 file changed

+31
-0
lines changed
  • src/content/reference/react-dom/components

1 file changed

+31
-0
lines changed

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,37 @@ export default function Search() {
7171

7272
</Sandpack>
7373

74+
You can override the default reset behaviour of the form by additionally passing an `onSubmit` prop to the `<form>` component calls `preventDefault` on the event and calling the action yourself. Passing `onSubmit` alongside `action` ensures the form can be progressively enhanced if this component is rendered to HTML on the server.
75+
76+
<Sandpack>
77+
78+
```js
79+
import { startTransition } from "react";
80+
export default function Search() {
81+
function search(formData) {
82+
const query = formData.get("query");
83+
alert(`You searched for '${query}'`);
84+
}
85+
return (
86+
<form
87+
action={search}
88+
onSubmit={(event) => {
89+
event.preventDefault();
90+
const formData = new FormData(event.currentTarget);
91+
startTransition(() => {
92+
search(formData);
93+
});
94+
}}
95+
>
96+
<input name="query" />
97+
<button type="submit">Search</button>
98+
</form>
99+
);
100+
}
101+
```
102+
103+
</Sandpack>
104+
74105
### Handle form submission with a Server Function {/*handle-form-submission-with-a-server-function*/}
75106

76107
Render a `<form>` with an input and submit button. Pass a Server Function (a function marked with [`'use server'`](/reference/rsc/use-server)) to the `action` prop of form to run the function when the form is submitted.

0 commit comments

Comments
 (0)