Skip to content

Commit 2024cce

Browse files
Translate useFormStatus.md to Portuguese (#1027)
1 parent 27bdb3c commit 2024cce

File tree

1 file changed

+35
-34
lines changed

1 file changed

+35
-34
lines changed

src/content/reference/react-dom/hooks/useFormStatus.md

+35-34
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: useFormStatus
44

55
<Intro>
66

7-
`useFormStatus` is a Hook that gives you status information of the last form submission.
7+
`useFormStatus` é um Hook que te dá informações de status da última submissão do formulário.
88

99
```js
1010
const { pending, data, method, action } = useFormStatus();
@@ -16,11 +16,11 @@ const { pending, data, method, action } = useFormStatus();
1616

1717
---
1818

19-
## Reference {/*reference*/}
19+
## Referência {/*reference*/}
2020

2121
### `useFormStatus()` {/*use-form-status*/}
2222

23-
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.
2424

2525
```js {5},[[1, 6, "status.pending"]]
2626
import { useFormStatus } from "react-dom";
@@ -40,42 +40,43 @@ export default function App() {
4040
}
4141
```
4242

43-
To get status information, the `Submit` component must be rendered within a `<form>`. The Hook returns information like the <CodeStep step={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 <CodeStep step={1}>`pending`</CodeStep>, que te diz se o formulário está enviando ativamente.
4444

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.
4646

47-
[See more examples below.](#usage)
47+
[Veja mais exemplos abaixo.](#usage)
4848

49-
#### Parameters {/*parameters*/}
49+
#### Parâmetros {/*parameters*/}
5050

51-
`useFormStatus` does not take any parameters.
51+
`useFormStatus` não aceita nenhum parâmetro.
5252

53-
#### Returns {/*returns*/}
53+
#### Retorna {/*returns*/}
5454

55-
A `status` object with the following properties:
55+
Um objeto `status` com as seguintes propriedades:
5656

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`.
5858

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`.
6060

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).
6262

6363
[//]: # (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`.
6565

66-
#### Caveats {/*caveats*/}
66+
#### Ressalvas {/*caveats*/}
6767

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.
7070

7171
---
7272

73-
## Usage {/*usage*/}
73+
## Uso {/*usage*/}
7474

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*/}
7776

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.
7980

8081
<Sandpack>
8182

@@ -110,13 +111,13 @@ export async function submitForm(query) {
110111
await new Promise((res) => setTimeout(res, 1000));
111112
}
112113
```
113-
</Sandpack>
114+
</Sandpack>
114115

115116
<Pitfall>
116117

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*/}
118119

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.
120121

121122
```js
122123
function Form() {
@@ -127,7 +128,7 @@ function Form() {
127128
}
128129
```
129130

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>`.
131132

132133
```js
133134
function Submit() {
@@ -148,11 +149,11 @@ function Form() {
148149

149150
</Pitfall>
150151

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*/}
152153

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.
154155

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.
156157

157158
<Sandpack>
158159

@@ -215,16 +216,16 @@ button {
215216
216217
```
217218
218-
</Sandpack>
219+
</Sandpack>
219220
220221
---
221222
222-
## Troubleshooting {/*troubleshooting*/}
223+
## Solução de problemas {/*troubleshooting*/}
223224
224-
### `status.pending` is never `true` {/*pending-is-never-true*/}
225+
### `status.pending` nunca é `true` {/*pending-is-never-true*/}
225226
226-
`useFormStatus` will only return status information for a parent `<form>`.
227+
`useFormStatus` só retornará informações de status para um `<form>` pai.
227228
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>`.
229230
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

Comments
 (0)