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
+31Lines changed: 31 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -71,6 +71,37 @@ export default function Search() {
71
71
72
72
</Sandpack>
73
73
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
+
exportdefaultfunctionSearch() {
81
+
functionsearch(formData) {
82
+
constquery=formData.get("query");
83
+
alert(`You searched for '${query}'`);
84
+
}
85
+
return (
86
+
<form
87
+
action={search}
88
+
onSubmit={(event) => {
89
+
event.preventDefault();
90
+
constformData=newFormData(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
+
74
105
### Handle form submission with a Server Function {/*handle-form-submission-with-a-server-function*/}
75
106
76
107
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