@@ -372,28 +372,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}.
}
);
@@ -410,17 +410,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 uma entrada passando algum `value` para ela, você a *força* a sempre ter o valor que você passou. Portanto, se você passar uma variável de estado como um `value`, mas esquecer de atualizar essa variável de estado de forma síncrona durante o manipulador de eventos `onChange`, o React reverterá a entrada após cada pressionamento de tecla de volta para o `value` que você especificou.
---
-### Optimizing re-rendering on every keystroke {/*optimizing-re-rendering-on-every-keystroke*/}
+### Otimizando a renderização a cada pressionamento de tecla {/*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 uma entrada controlada, você define o estado a cada pressionamento de tecla. Se o componente que contém seu estado renderizar uma árvore grande, isso pode ficar lento. Existem algumas maneiras de otimizar o desempenho da 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 renderiza todo o conteúdo da página a cada pressionamento de tecla:
```js {5-8}
function App() {
@@ -436,7 +436,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` para um campo de formulário sem um manipulador `onChange`. Isso renderizará um campo somente leitura. Se o campo deve 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ê só queria [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` para um campo de formulário sem um manipulador `onChange`. Isso renderizará um campo somente leitura. Se o campo deve 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ê só queria [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 controlada 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 a 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 alteração