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 DevTools உங்கள் React component-களின் props மற்றும் state-ஐச் சரிபார்க்க அனுமதிக்கிறது. CodeSandbox-இல் _browser_ பிரிவின் கீழே React DevTools tab-ஐக் காணலாம்:
screen-இல் குறிப்பிட்ட component-ஐ inspect செய்ய, React DevTools-ன் இடது மேல் மூலையில் உள்ள button-ஐப் பயன்படுத்துங்கள்:
907
908
908
909
910
+
=======
911
+
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:
local development-க்கு, React DevTools [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), மற்றும் [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) browser extension ஆக கிடைக்கிறது. அதை install செய்தால், React பயன்படுத்தும் site-களுக்காக உங்கள் browser Developer Tools-இல் *Components* tab தோன்றும்.
924
+
=======
925
+
To inspect a particular component on the screen, use the button in the top left corner of the Components tab:
926
+
927
+
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/components/form.md
+44Lines changed: 44 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -48,9 +48,53 @@ Information submit செய்ய interactive controls உருவாக்க
48
48
49
49
## Usage {/*usage*/}
50
50
51
+
<<<<<<< HEAD
51
52
### Client-இல் form submission handle செய்தல் {/*handle-form-submission-on-the-client*/}
52
53
53
54
Form submit செய்யப்படும் போது function run ஆக, form-ன் `action` prop-க்கு function pass செய்யவும். [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData), argument ஆக function-க்கு pass செய்யப்படும்; இதனால் form submit செய்த data-வை access செய்யலாம். இது URLs மட்டுமே ஏற்கும் conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action)-இலிருந்து வேறுபடுகிறது. `action` function succeed ஆன பிறகு, form-இல் உள்ள எல்லா uncontrolled field elements reset செய்யப்படும்.
55
+
=======
56
+
### Handle form submission with an event handler {/*handle-form-submission-with-an-event-handler*/}
57
+
58
+
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.
59
+
60
+
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`.
61
+
62
+
<Sandpack>
63
+
64
+
```js src/App.js
65
+
exportdefaultfunctionSearch() {
66
+
functionhandleSubmit(e) {
67
+
// Prevent the browser from reloading the page
68
+
e.preventDefault();
69
+
70
+
// Read the form data
71
+
constform=e.target;
72
+
constformData=newFormData(form);
73
+
constquery=formData.get("query");
74
+
alert(`You searched for '${query}'`);
75
+
}
76
+
77
+
return (
78
+
<form onSubmit={handleSubmit}>
79
+
<input name="query"/>
80
+
<button type="submit">Search</button>
81
+
</form>
82
+
);
83
+
}
84
+
```
85
+
86
+
</Sandpack>
87
+
88
+
<Note>
89
+
90
+
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.
91
+
92
+
</Note>
93
+
94
+
### Handle form submission with an action prop {/*handle-form-submission-with-an-action-prop*/}
95
+
96
+
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.
- இந்த method cause எதுவாக இருந்தாலும் *ஒவ்வொரு* render-இலும் fired ஆகும். Parent re-render ஏற்படுத்தும் போது மட்டும் fire ஆகும், local `setState` காரணமாக அல்லாத [`UNSAFE_componentWillReceiveProps`](#unsafe_cmoponentwillreceiveprops)-இலிருந்து இது வேறுபடும்.
1014
+
=======
1015
+
- 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
- இந்த method component instance-க்கு access இல்லை. விரும்பினால், component props மற்றும் state-ன் pure functions-ஐ class definition-க்கு வெளியே extract செய்வதன் மூலம் `static getDerivedStateFromProps` மற்றும் மற்ற class methods இடையே சில code reuse செய்யலாம்.
0 commit comments