diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index 8f6ab00e0..2c0f8fc8a 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -5,19 +5,19 @@ canary: true
-React's extensions to `
-The [built-in browser `
```
@@ -27,38 +27,38 @@ The [built-in browser `
```
-[See more examples below.](#usage)
+[Veja mais exemplos abaixo.](#usage)
#### Props {/*props*/}
-`
}
+ fallback={
Ocorreu um erro ao enviar o formulário
}
>
-
+
);
@@ -318,15 +317,15 @@ export default function Search() {
-### Display a form submission error without JavaScript {/*display-a-form-submission-error-without-javascript*/}
+### Exibir um erro de envio do formulário sem JavaScript {/*display-a-form-submission-error-without-javascript*/}
-Displaying a form submission error message before the JavaScript bundle loads for progressive enhancement requires that:
+Exibir uma mensagem de erro de envio do formulário antes que o pacote JavaScript carregue para aprimoramento progressivo requer que:
-1. `
` be rendered by a [Server Component](/reference/rsc/use-client)
-1. the function passed to the `
`'s `action` prop be a [Server Action](/reference/rsc/use-server)
-1. the `useActionState` Hook be used to display the error message
+1. `
` seja renderizado por um [Componente do Servidor](/reference/rsc/use-client)
+1. a função passada para a prop `action` do `
` seja uma [Ação do Servidor](/reference/rsc/use-server)
+1. o Hook `useActionState` seja usado para exibir a mensagem de erro
-`useActionState` takes two parameters: a [Server Action](/reference/rsc/use-server) and an initial state. `useActionState` returns two values, a state variable and an action. The action returned by `useActionState` should be passed to the `action` prop of the form. The state variable returned by `useActionState` can be used to displayed an error message. The value returned by the [Server Action](/reference/rsc/use-server) passed to `useActionState` will be used to update the state variable.
+`useActionState` aceita dois parâmetros: uma [Ação do Servidor](/reference/rsc/use-server) e um estado inicial. `useActionState` retorna dois valores, uma variável de estado e uma ação. A ação retornada pelo `useActionState` deve ser passada para a prop `action` do formulário. A variável de estado retornada pelo `useActionState` pode ser usada para exibir uma mensagem de erro. O valor retornado pela [Ação do Servidor](/reference/rsc/use-server) passada para `useActionState` será usado para atualizar a variável de estado.
@@ -340,7 +339,7 @@ export default function Page() {
const email = formData.get("email");
try {
await signUpNewUser(email);
- alert(`Added "${email}"`);
+ alert(`Adicionado "${email}"`);
} catch (err) {
return err.toString();
}
@@ -348,12 +347,12 @@ export default function Page() {
const [message, signupAction] = useActionState(signup, null);
return (
<>
-
Signup for my newsletter
-
Signup with the same email twice to see an error
+
Inscreva-se para minha newsletter
+
Inscreva-se com o mesmo email duas vezes para ver um erro
-
+
{!!message &&
{message}
}
>
@@ -366,7 +365,7 @@ let emails = [];
export async function signUpNewUser(newEmail) {
if (emails.includes(newEmail)) {
- throw new Error("This email address has already been added");
+ throw new Error("Este endereço de email já foi adicionado");
}
emails.push(newEmail);
}
@@ -386,13 +385,13 @@ export async function signUpNewUser(newEmail) {
-Learn more about updating state from a form action with the [`useActionState`](/reference/react/useActionState) docs
+Saiba mais sobre atualizar o estado a partir de uma ação de formulário com a documentação do [`useActionState`](/reference/react/useActionState)
-### Handling multiple submission types {/*handling-multiple-submission-types*/}
+### Tratando múltiplos tipos de envio {/*handling-multiple-submission-types*/}
-Forms can be designed to handle multiple submission actions based on the button pressed by the user. Each button inside a form can be associated with a distinct action or behavior by setting the `formAction` prop.
+Os formulários podem ser projetados para lidar com várias ações de envio, com base no botão pressionado pelo usuário. Cada botão dentro de um formulário pode ser associado a uma ação ou comportamento distinto definindo a prop `formAction`.
-When a user taps a specific button, the form is submitted, and a corresponding action, defined by that button's attributes and action, is executed. For instance, a form might submit an article for review by default but have a separate button with `formAction` set to save the article as a draft.
+Quando um usuário clica em um botão específico, o formulário é enviado, e uma ação correspondente, definida pelos atributos e ação daquele botão, é executada. Por exemplo, um formulário pode enviar um artigo para revisão por padrão, mas ter um botão separado com `formAction` definido para salvar o artigo como um rascunho.
@@ -401,20 +400,20 @@ export default function Search() {
function publish(formData) {
const content = formData.get("content");
const button = formData.get("button");
- alert(`'${content}' was published with the '${button}' button`);
+ alert(`'${content}' foi publicado com o botão '${button}'`);
}
function save(formData) {
const content = formData.get("content");
- alert(`Your draft of '${content}' has been saved!`);
+ alert(`Seu rascunho de '${content}' foi salvo!`);
}
return (
-
-
+
+
);
}
@@ -432,4 +431,4 @@ export default function Search() {
}
```
-
+
\ No newline at end of file