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
{{ message }}
Repository navigation
Commit 9cbab3a
Browse filesBrowse the repository at this point in the historyBrowse files
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 @@ Para criar controles interativos para enviar informações, renderize o [compone
48
48
49
49
## Uso {/*usage*/}
50
50
51
+
<<<<<<< HEAD
51
52
### Manipular envio de formulário no cliente {/*handle-form-submission-on-the-client*/}
52
53
53
54
Passe uma função para a prop `action` do formulário para executar a função quando o formulário for enviado. [`formData`](https://developer.mozilla.org/pt-BR/docs/Web/API/FormData) será passado para a função como um argumento para que você possa acessar os dados enviados pelo formulário. Isso difere da [ação HTML](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/form#action) convencional, que aceita apenas URLs. Após a execução da função `action`, todos os elementos de campo não controlados no formulário são redefinidos.
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.
- Este método é disparado em *cada* renderização, independentemente da causa. Isso é diferente de [`UNSAFE_componentWillReceiveProps`](#unsafe_cmoponentwillreceiveprops), que só é disparado quando os pais causam uma nova renderização e não como resultado de um `setState` local.
1012
+
=======
1013
+
- 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`.
1014
+
>>>>>>> 152a471aa9ac2f6f0f3e64c04f39da790d40cf61
1011
1015
1012
1016
- Este método não tem acesso à instância do componente. Se você quiser, poderá reutilizar algum código entre `static getDerivedStateFromProps` e os outros métodos de classe, extraindo funções puras das props e do estado do componente fora da definição da classe.
0 commit comments