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
The `useFormStatus`Hook provides status information of the last form submission.
23
+
O Hook `useFormStatus`fornece informações de status da última submissão do formulário.
24
24
25
25
```js {5},[[1, 6, "status.pending"]]
26
26
import { useFormStatus } from"react-dom";
@@ -40,42 +40,43 @@ export default function App() {
40
40
}
41
41
```
42
42
43
-
To get status information, the `Submit`component must be rendered within a`<form>`. The Hook returns information like the <CodeStepstep={1}>`pending`</CodeStep> property which tells you if the form is actively submitting.
43
+
Para obter informações de status, o componente `Submit`deve ser renderizado dentro de um`<form>`. O Hook retorna informações como a propriedade <CodeStepstep={1}>`pending`</CodeStep>, que te diz se o formulário está enviando ativamente.
44
44
45
-
In the above example, `Submit`uses this information to disable `<button>`presses while the form is submitting.
45
+
No exemplo acima, `Submit`usa essa informação para desabilitar os cliques no `<button>`enquanto o formulário está enviando.
46
46
47
-
[See more examples below.](#usage)
47
+
[Veja mais exemplos abaixo.](#usage)
48
48
49
-
#### Parameters {/*parameters*/}
49
+
#### Parâmetros {/*parameters*/}
50
50
51
-
`useFormStatus`does not take any parameters.
51
+
`useFormStatus`não aceita nenhum parâmetro.
52
52
53
-
#### Returns {/*returns*/}
53
+
#### Retorna {/*returns*/}
54
54
55
-
A `status`object with the following properties:
55
+
Um objeto `status`com as seguintes propriedades:
56
56
57
-
*`pending`: A boolean. If`true`, this means the parent`<form>`is pending submission. Otherwise, `false`.
57
+
*`pending`: Um booleano. Se`true`, isso significa que o`<form>`pai está pendente de envio. Caso contrário, `false`.
58
58
59
-
*`data`: An object implementing the[`FormData interface`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)that contains the data the parent`<form>`is submitting. If there is no active submission or no parent `<form>`, it will be`null`.
59
+
*`data`: Um objeto implementando a[`FormData interface`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)que contém os dados que o`<form>`pai está enviando. Se não houver envio ativo ou nenhum `<form>` pai, ele será`null`.
60
60
61
-
*`method`: A string value of either`'get'`or`'post'`. This represents whether the parent `<form>`is submitting with either a `GET` or `POST`[HTTP method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods). By default, a`<form>`will use the`GET`method and can be specified by the [`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method) property.
61
+
*`method`: Um valor de string de`'get'`ou`'post'`. Isso representa se o `<form>`pai está enviando com um [HTTP method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods)`GET` ou `POST`. Por padrão, um`<form>`usará o método`GET`e pode ser especificado pela propriedade [`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method).
62
62
63
63
[//]: #(Link to `<form>` documentation. "Read more on the `action` prop on `<form>`.")
64
-
*`action`: A reference to the function passed to the `action`prop on the parent `<form>`. If there is no parent `<form>`, the property is`null`. If there is a URI value provided to the`action` prop, or no `action`prop specified, `status.action`will be`null`.
64
+
*`action`: Uma referência para a função passada para a prop `action`no `<form>` pai. Se não houver um `<form>` pai, a propriedade é`null`. Se houver um valor URI fornecido para a prop`action`, ou nenhuma prop `action`especificada, `status.action`será`null`.
65
65
66
-
#### Caveats {/*caveats*/}
66
+
#### Ressalvas {/*caveats*/}
67
67
68
-
*The `useFormStatus`Hook must be called from a component that is rendered inside a`<form>`.
69
-
*`useFormStatus`will only return status information for a parent `<form>`. It will not return status information for any `<form>`rendered in that same component or children components.
68
+
*O Hook `useFormStatus`deve ser chamado de um componente que é renderizado dentro de um`<form>`.
69
+
*`useFormStatus`só retornará informações de status para um `<form>` pai. Ele não retornará informações de status para nenhum `<form>`renderizado no mesmo componente ou em componentes filhos.
70
70
71
71
---
72
72
73
-
## Usage {/*usage*/}
73
+
## Uso {/*usage*/}
74
74
75
-
### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
76
-
To display a pending state while a form is submitting, you can call the `useFormStatus` Hook in a component rendered in a `<form>` and read the `pending` property returned.
75
+
### Exibir um estado pendente durante o envio do formulário {/*display-a-pending-state-during-form-submission*/}
77
76
78
-
Here, we use the `pending` property to indicate the form is submitting.
77
+
Para exibir um estado pendente enquanto um formulário está enviando, você pode chamar o Hook `useFormStatus` em um componente renderizado em um `<form>` e ler a propriedade `pending` retornada.
78
+
79
+
Aqui, usamos a propriedade `pending` para indicar que o formulário está sendo enviado.
79
80
80
81
<Sandpack>
81
82
@@ -110,13 +111,13 @@ export async function submitForm(query) {
110
111
awaitnewPromise((res) =>setTimeout(res, 1000));
111
112
}
112
113
```
113
-
</Sandpack>
114
+
</Sandpack>
114
115
115
116
<Pitfall>
116
117
117
-
##### `useFormStatus`will not return status information for a `<form>`rendered in the same component. {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/}
118
+
##### `useFormStatus`não retornará informações de status para um `<form>`renderizado no mesmo componente. {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/}
118
119
119
-
The `useFormStatus`Hook only returns status information for a parent `<form>`and not for any `<form>`rendered in the same component calling the Hook, or child components.
120
+
O Hook `useFormStatus`só retorna informações de status para um `<form>`pai e não para nenhum `<form>`renderizado no mesmo componente que chama o Hook, ou componentes filhos.
120
121
121
122
```js
122
123
functionForm() {
@@ -127,7 +128,7 @@ function Form() {
127
128
}
128
129
```
129
130
130
-
Instead call `useFormStatus`from inside a component that is located inside`<form>`.
131
+
Em vez disso, chame `useFormStatus`de dentro de um componente que está localizado dentro do`<form>`.
131
132
132
133
```js
133
134
functionSubmit() {
@@ -148,11 +149,11 @@ function Form() {
148
149
149
150
</Pitfall>
150
151
151
-
### Read the form data being submitted {/*read-form-data-being-submitted*/}
152
+
### Ler os dados do formulário que estão sendo enviados {/*read-form-data-being-submitted*/}
152
153
153
-
You can use the `data`property of the status information returned from `useFormStatus`to display what data is being submitted by the user.
154
+
Você pode usar a propriedade `data`das informações de status retornadas de `useFormStatus`para exibir quais dados estão sendo enviados pelo usuário.
154
155
155
-
Here, we have a form where users can request a username. We can use `useFormStatus`to display a temporary status message confirming what username they have requested.
156
+
Aqui, temos um formulário onde os usuários podem solicitar um nome de usuário. Podemos usar `useFormStatus`para exibir uma mensagem de status temporária confirmando qual nome de usuário eles solicitaram.
`useFormStatus`will only returnstatus information for a parent `<form>`.
227
+
`useFormStatus`só retornará informações de status para um `<form>` pai.
227
228
228
-
If the component that calls`useFormStatus`is not nested in a`<form>`, `status.pending`will always return`false`. Verify`useFormStatus`is called in a component that is a child of a`<form>` element.
229
+
Se o componente que chama`useFormStatus`não estiver aninhado em um`<form>`, `status.pending`sempre retornará `false`. Verifique se `useFormStatus`é chamado em um componente que é filho de um elemento`<form>`.
229
230
230
-
`useFormStatus`will not track the status of a`<form>`rendered in the same component. See [Pitfall](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) for more details.
231
+
`useFormStatus`não rastreará o status de um`<form>`renderizado no mesmo componente. Veja [Ressalva](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) para mais detalhes.
0 commit comments