Skip to content

Translate useFormStatus.md to pt-br #879

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Translate useFormStatus.md to pt-br #879

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 43 additions & 43 deletions src/content/reference/react-dom/hooks/useFormStatus.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ canary: true

<Canary>

The `useFormStatus` Hook is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
O Hook `useFormStatus` está atualmente disponível apenas nos canais Canary e experimentais do React. Saiba mais sobre [os canais de lançamento do React aqui](/community/versioning-policy#all-release-channels).

</Canary>

<Intro>

`useFormStatus` is a Hook that gives you status information of the last form submission.
O `useFormStatus` é um Hook que fornece informações de status da última submissão de formulário.

```js
const { pending, data, method, action } = useFormStatus();
Expand All @@ -23,19 +23,19 @@ const { pending, data, method, action } = useFormStatus();

---

## Reference {/*reference*/}
## Referência {/*reference*/}

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

The `useFormStatus` Hook provides status information of the last form submission.
O Hook `useFormStatus` fornece informações de status da última submissão de formulário.

```js {5},[[1, 6, "status.pending"]]
import { useFormStatus } from "react-dom";
import action from './actions';

function Submit() {
const status = useFormStatus();
return <button disabled={status.pending}>Submit</button>
return <button disabled={status.pending}>Submeter</button>
}

export default function App() {
Expand All @@ -47,42 +47,42 @@ export default function App() {
}
```

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.
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 indica se o formulário está em processo de submissão.

In the above example, `Submit` uses this information to disable `<button>` presses while the form is submitting.
No exemplo acima, o `Submit` usa essas informações para desabilitar os cliques no `<button>` enquanto o formulário está sendo submetido.

[See more examples below.](#usage)
[Veja mais exemplos abaixo.](#usage)

#### Parameters {/*parameters*/}
#### Parâmetros {/*parameters*/}

`useFormStatus` does not take any parameters.
O `useFormStatus` não aceita nenhum parâmetro.

#### Returns {/*returns*/}
#### Retornos {/*returns*/}

A `status` object with the following properties:
Um objeto `status` com as seguintes propriedades:

* `pending`: A boolean. If `true`, this means the parent `<form>` is pending submission. Otherwise, `false`.
* `pending`: Um booleano. Se `true`, isso significa que o `<form>` pai está pendente de submissão. Caso contrário, `false`.

* `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`.
* `data`: Um objeto que implementa a [`interface FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) que contém os dados que o `<form>` pai está submetendo. Se não houver uma submissão ativa ou nenhum `<form>` pai, será `null`.

* `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.
* `method`: Um valor string que pode ser `'get'` ou `'post'`. Isso representa se o `<form>` pai está submetendo com o método [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) que pode ser `GET` ou `POST`. Por padrão, um `<form>` usará o método `GET` e isso pode ser especificado pela propriedade [`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method).

[//]: # (Link to `<form>` documentation. "Read more on the `action` prop on `<form>`.")
* `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`.
[//]: # (Link para a documentação do `<form>`. "Leia mais sobre a propriedade `action` no `<form>`.")
* `action`: Uma referência à função passada pela propriedade `action` no `<form>` pai. Se não houver um `<form>` pai, a propriedade será `null`. Se houver um valor de URI fornecido para a propriedade `action`, ou nenhuma propriedade `action` especificada, `status.action` será `null`.

#### Caveats {/*caveats*/}
#### Ressalvas {/*caveats*/}

* The `useFormStatus` Hook must be called from a component that is rendered inside a `<form>`.
* `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.
* O Hook `useFormStatus` deve ser chamado de um componente que é renderizado dentro de um `<form>`.
* O `useFormStatus` só retornará informações de status para um `<form>` pai. Ele não retornará informações de status para qualquer `<form>` renderizado no mesmo componente ou nos componentes filhos.

---

## Usage {/*usage*/}
## Uso {/*usage*/}

### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
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.
### Exibir um estado pendente durante a submissão do formulário {/*display-a-pending-state-during-form-submission*/}
Para exibir um estado pendente enquanto um formulário está sendo submetido, você pode chamar o Hook `useFormStatus` em um componente renderizado em um `<form>` e ler a propriedade `pending` retornada.

Here, we use the `pending` property to indicate the form is submitting.
Aqui, usamos a propriedade `pending` para indicar que o formulário está sendo submetido.

<Sandpack>

Expand All @@ -94,7 +94,7 @@ function Submit() {
const { pending } = useFormStatus();
return (
<button type="submit" disabled={pending}>
{pending ? "Submitting..." : "Submit"}
{pending ? "Submetendo..." : "Submeter"}
</button>
);
}
Expand Down Expand Up @@ -133,30 +133,30 @@ export async function submitForm(query) {

<Pitfall>

##### `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*/}
##### `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*/}

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.
O Hook `useFormStatus` apenas retorna informações de status para um `<form>` pai e não para qualquer `<form>` renderizado no mesmo componente que chama o Hook, ou componentes filhos.

```js
function Form() {
// 🚩 `pending` will never be true
// useFormStatus does not track the form rendered in this component
// 🚩 `pending` nunca será true
// useFormStatus não rastreia o formulário renderizado neste componente
const { pending } = useFormStatus();
return <form action={submit}></form>;
}
```

Instead call `useFormStatus` from inside a component that is located inside `<form>`.
Em vez disso, chame o `useFormStatus` de dentro de um componente que está localizado dentro do `<form>`.

```js
function Submit() {
// ✅ `pending` will be derived from the form that wraps the Submit component
// ✅ `pending` será derivado do formulário que envolve o componente Submit
const { pending } = useFormStatus();
return <button disabled={pending}>...</button>;
}

function Form() {
// This is the <form> `useFormStatus` tracks
// Este é o <form> que o useFormStatus rastreia
return (
<form action={submit}>
<Submit />
Expand All @@ -167,11 +167,11 @@ function Form() {

</Pitfall>

### Read the form data being submitted {/*read-form-data-being-submitted*/}
### Ler os dados do formulário que estão sendo submetidos {/*read-form-data-being-submitted*/}

You can use the `data` property of the status information returned from `useFormStatus` to display what data is being submitted by the user.
Você pode usar a propriedade `data` das informações de status retornadas pelo `useFormStatus` para exibir quais dados estão sendo submetidos pelo usuário.

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.
Aqui, temos um formulário onde os usuários podem solicitar um nome de usuário. Podemos usar o `useFormStatus` para exibir uma mensagem de status temporária confirmando qual nome de usuário eles solicitaram.

<Sandpack>

Expand All @@ -184,13 +184,13 @@ export default function UsernameForm() {

return (
<div>
<h3>Request a Username: </h3>
<h3>Solicitar um Nome de Usuário: </h3>
<input type="text" name="username" disabled={pending}/>
<button type="submit" disabled={pending}>
Submit
Submeter
</button>
<br />
<p>{data ? `Requesting ${data?.get("username")}...`: ''}</p>
<p>{data ? `Solicitando ${data?.get("username")}...`: ''}</p>
</div>
);
}
Expand Down Expand Up @@ -249,12 +249,12 @@ button {

---

## Troubleshooting {/*troubleshooting*/}
## Solução de Problemas {/*troubleshooting*/}

### `status.pending` is never `true` {/*pending-is-never-true*/}
### `status.pending` nunca é `true` {/*pending-is-never-true*/}

`useFormStatus` will only return status information for a parent `<form>`.
O `useFormStatus` apenas retornará informações de status para um `<form>` pai.

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.
Se o componente que chama o `useFormStatus` não estiver aninhado em um `<form>`, `status.pending` sempre retornará `false`. Verifique se o `useFormStatus` é chamado em um componente que é filho de um elemento `<form>`.

`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.
O `useFormStatus` não rastreará o status de um `<form>` renderizado no mesmo componente. Veja [Pitfall](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) para mais detalhes.
Loading