Skip to content

Commit 068c6a3

Browse files
docs: explain preventing form reset
1 parent abe931a commit 068c6a3

File tree

1 file changed

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

1 file changed

+29
-0
lines changed

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,35 @@ export default function Search() {
6868
);
6969
}
7070
```
71+
### Preventing form reset {/*preventing-form-reset*/}
72+
73+
By default, forms using the `action` prop reset after submission.
74+
75+
If you want to preserve form state, use controlled inputs with React state.
76+
77+
<Sandpack>
78+
79+
```js src/App.js
80+
import { useState } from "react";
81+
82+
export default function Form() {
83+
const [value, setValue] = useState("");
84+
85+
async function handleSubmit(formData) {
86+
// handle submission
87+
}
88+
89+
return (
90+
<form action={handleSubmit}>
91+
<input
92+
name="text"
93+
value={value}
94+
onChange={(e) => setValue(e.target.value)}
95+
/>
96+
<button type="submit">Submit</button>
97+
</form>
98+
);
99+
}
71100

72101
</Sandpack>
73102

0 commit comments

Comments
 (0)