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
React Developer Tools let you check the props and the state of your React components. It is available as a [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), and [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) browser extension.
909
912
910
-
<Note>
913
+
After you install it, a new *Components* tab will appear in your browser Developer Tools for sites using React. If you're following along in CodeSandbox, you'd need to first open your sandbox preview in a new tab:
914
+
915
+
916
+
917
+
Then, on the preview page, open your browser's DevTools and find the *Components* tab:
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/components/form.md
+40-2Lines changed: 40 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -48,9 +48,47 @@ To create interactive controls for submitting information, render the [built-in
48
48
49
49
## Usage {/*usage*/}
50
50
51
-
### Handle form submission on the client {/*handle-form-submission-on-the-client*/}
51
+
### Handle form submission with an event handler {/*handle-form-submission-with-an-event-handler*/}
52
52
53
-
Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. After the `action` function succeeds, all uncontrolled field elements in the form are reset.
53
+
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, so call [`e.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) to override that behavior.
54
+
55
+
This example reads the submitted values with [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData), which collects every field by its `name`. This keeps the inputs [uncontrolled](/reference/react-dom/components/input#reading-the-input-values-when-submitting-a-form). If you instead [control an input with state](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), read from that state on submit rather than from `FormData`.
56
+
57
+
<Sandpack>
58
+
59
+
```js src/App.js
60
+
exportdefaultfunctionSearch() {
61
+
functionhandleSubmit(e) {
62
+
// Prevent the browser from reloading the page
63
+
e.preventDefault();
64
+
65
+
// Read the form data
66
+
constform=e.target;
67
+
constformData=newFormData(form);
68
+
constquery=formData.get("query");
69
+
alert(`You searched for '${query}'`);
70
+
}
71
+
72
+
return (
73
+
<form onSubmit={handleSubmit}>
74
+
<input name="query"/>
75
+
<button type="submit">Search</button>
76
+
</form>
77
+
);
78
+
}
79
+
```
80
+
81
+
</Sandpack>
82
+
83
+
<Note>
84
+
85
+
Reading form data with `onSubmit` works in every version of React and gives you direct access to the [submit event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event), so you can call `e.preventDefault()` and read the data yourself. Passing the function to the `action` prop instead runs the submission in a [Transition](/reference/react/useTransition). React then tracks the pending state, sends thrown errors to the nearest error boundary, and lets the form work with [`useActionState`](/reference/react/useActionState) and [`useOptimistic`](/reference/react/useOptimistic). An `action` can also be a [Server Function](/reference/rsc/server-functions), which `onSubmit` does not support.
86
+
87
+
</Note>
88
+
89
+
### Handle form submission with an action prop {/*handle-form-submission-with-an-action-prop*/}
90
+
91
+
Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. Unlike `onSubmit`, an `action` runs in a [Transition](/reference/react/useTransition) and calling `e.preventDefault()` isn't needed. After the `action` function succeeds, all uncontrolled field elements in the form are reset.
- This method is fired on *every* render, regardless of the cause. This is different from [`UNSAFE_componentWillReceiveProps`](#unsafe_componentwillreceiveprops), which only fires when the parent causes a re-render and not as a result of a local `setState`.
1016
+
>>>>>>>2639f369946f763fff9a2572b0d7c4b9e2f83ebd
1013
1017
1014
1018
- 此方法无权访问组件实例。如果你愿意，你可以在 `static getDerivedStateFromProps` 和其他类方法之间重用一些代码，也就是提取类定义之外的组件 props 和 state 的纯函数。
0 commit comments