@@ -378,28 +378,28 @@ export default function Form() {
return (
<>
- First name:
+ Primeiro nome:
- Age:
+ Idade:
setAge(ageAsNumber + 10)}>
- Add 10 years
+ Adicionar 10 anos
{firstName !== '' &&
- Your name is {firstName}.
+ Seu nome é {firstName}.
}
{ageAsNumber > 0 &&
- Your age is {ageAsNumber}.
+ Sua idade é {ageAsNumber}.
}
);
@@ -416,17 +416,17 @@ p { font-weight: bold; }
-**If you pass `value` without `onChange`, it will be impossible to type into the input.** When you control an input by passing some `value` to it, you *force* it to always have the value you passed. So if you pass a state variable as a `value` but forget to update that state variable synchronously during the `onChange` event handler, React will revert the input after every keystroke back to the `value` that you specified.
+**Se você passar `value` sem `onChange`, será impossível digitar na entrada.** Quando você controla um input passando algum `value` para ele, você *força* ele a sempre ter o valor que você passou. Então, se você passar uma variável de estado como `value` mas esquecer de atualizar essa variável de estado sincronicamente durante o manipulador de eventos `onChange`, o React reverterá o input após cada tecla pressionada de volta para o `value` que você especificou.
---
-### Optimizing re-rendering on every keystroke {/*optimizing-re-rendering-on-every-keystroke*/}
+### Otimizando a re-renderização em cada tecla pressionada {/*optimizing-re-rendering-on-every-keystroke*/}
-When you use a controlled input, you set the state on every keystroke. If the component containing your state re-renders a large tree, this can get slow. There's a few ways you can optimize re-rendering performance.
+Quando você usa um input controlado, você define o estado em cada tecla pressionada. Se o componente que contém seu estado re-renderiza uma árvore grande, isso pode ficar lento. Existem algumas maneiras de otimizar o desempenho da re-renderização.
-For example, suppose you start with a form that re-renders all page content on every keystroke:
+Por exemplo, suponha que você comece com um formulário que re-renderiza todo o conteúdo da página a cada tecla pressionada:
```js {5-8}
function App() {
@@ -442,7 +442,7 @@ function App() {
}
```
-Since `
-You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
+Você forneceu uma prop `value` a um campo de formulário sem um manipulador `onChange`. Isso renderizará um campo somente leitura. Se o campo deveria ser mutável, use `defaultValue`. Caso contrário, defina `onChange` ou `readOnly`.
-As the error message suggests, if you only wanted to [specify the *initial* value,](#providing-an-initial-value-for-an-input) pass `defaultValue` instead:
+Como a mensagem de erro sugere, se você apenas quisesse [especificar o *valor inicial,](#providing-an-initial-value-for-an-input) passe `defaultValue` em vez disso:
```js
-// ✅ Good: uncontrolled input with an initial value
+// ✅ Bom: entrada não controlada com um valor inicial
-You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.
+Você forneceu uma prop `checked` a um campo de formulário sem um manipulador `onChange`. Isso renderizará um campo somente leitura. Se o campo deveria ser mutável, use `defaultChecked`. Caso contrário, defina `onChange` ou `readOnly`.
-As the error message suggests, if you only wanted to [specify the *initial* value,](#providing-an-initial-value-for-an-input) pass `defaultChecked` instead:
+Como a mensagem de erro sugere, se você apenas quisesse [especificar o *valor inicial,](#providing-an-initial-value-for-an-input) passe `defaultChecked` em vez disso:
```js
-// ✅ Good: uncontrolled checkbox with an initial value
+// ✅ Bom: checkbox não controlado com um valor inicial
-You need to read `e.target.checked` rather than `e.target.value` for checkboxes.
+Você precisa ler `e.target.checked` em vez de `e.target.value` para checkboxes.
-If the checkbox is intentionally read-only, add a `readOnly` prop to suppress the error:
+Se o checkbox for intencionalmente somente leitura, adicione uma prop `readOnly` para suprimir o erro:
```js
-// ✅ Good: readonly controlled input without on change
+// ✅ Bom: entrada controlada somente leitura sem on change