Skip to content

Commit 4c18d9e

Browse files
Paolorecarburo
authored andcommitted
Translate: Uncontrolled Components (#117)
1 parent 05a4734 commit 4c18d9e

File tree

1 file changed

+14
-16
lines changed

1 file changed

+14
-16
lines changed

content/docs/uncontrolled-components.md

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
---
22
id: uncontrolled-components
3-
title: Uncontrolled Components
3+
title: Componentes no controlados
44
permalink: docs/uncontrolled-components.html
55
---
66

7-
In most cases, we recommend using [controlled components](/docs/forms.html) to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.
7+
En la mayoría de los casos, te recomendamos usar [Componentes Controlados](/docs/forms.html) para implementar formularios. En un componente controlado, los datos del formulario son manejados por un componente React. La alternativa son los componentes no controlados, donde los datos del formulario son manejados por el propio DOM.
88

9-
To write an uncontrolled component, instead of writing an event handler for every state update, you can [use a ref](/docs/refs-and-the-dom.html) to get form values from the DOM.
9+
Para escribir un componente no controlado, en lugar de escribir un controlador de eventos para cada actualización de estado, puedes [usar una referencia](/docs/refs-and-the-dom.html) para que obtengas los valores del formulario desde el DOM.
1010

11-
For example, this code accepts a single name in an uncontrolled component:
11+
Por ejemplo, este código acepta un solo nombre en un componente no controlado:
1212

1313
```javascript{5,9,18}
1414
class NameForm extends React.Component {
@@ -37,15 +37,15 @@ class NameForm extends React.Component {
3737
}
3838
```
3939

40-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
40+
[**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
4141

42-
Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
42+
Ya que un componente es la fuente de la verdad en el DOM, a veces es más fácil integrar el código React y el código no React cuando usas componentes no controlados. También puede haber menos código si optas por una solución rápida y sin muchos miramientos. De lo contrario, deberías por lo general utilizar componentes controlados.
4343

44-
If it's still not clear which type of component you should use for a particular situation, you might find [this article on controlled versus uncontrolled inputs](http://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) to be helpful.
44+
Si aún no tienes claro qué tipo de componente debes usar para una situación en particular, puedes encontrar [este artículo sobre entradas controladas y no controladas](http://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) que puede ser útil.
4545

46-
### Default Values {#default-values}
46+
### Valores predeterminados {#default-values}
4747

48-
In the React rendering lifecycle, the `value` attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a `defaultValue` attribute instead of `value`.
48+
En el ciclo de vida de renderizado de React, el atributo `value` en los elementos del formulario reemplazará el valor en el DOM con un componente no controlado, a menudo quieres React para especificar el valor inicial, pero dejas las actualizaciones posteriores sin control. Para manejar este caso, puedes especificar un `defaultValue` en lugar de `value`.
4949

5050
```javascript{7}
5151
render() {
@@ -64,21 +64,19 @@ render() {
6464
}
6565
```
6666

67-
Likewise, `<input type="checkbox">` and `<input type="radio">` support `defaultChecked`, and `<select>` and `<textarea>` supports `defaultValue`.
67+
Del mismo modo, `<input type="checkbox">` e `<input type="radio">` admiten `defaultChecked`, y `<select>` y `<textarea>` admiten `defaultValue`.
6868

69-
## The file input Tag {#the-file-input-tag}
69+
## La etiqueta de entrada de archivo {#the-file-input-tag}
7070

71-
In HTML, an `<input type="file">` lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
71+
En HTML, un `<input type="file">` permite al usuario elegir uno o más archivos del almacenamiento en sus dispositivos para cargarlos a un servidor o manipularlos mediante JavaScript a través de la [API File](https://developer.mozilla.org/es/docs/Web/API/File/Using_files_from_web_applications).
7272

7373
```html
7474
<input type="file" />
7575
```
7676

77-
In React, an `<input type="file" />` is always an uncontrolled component because its value can only be set by a user, and not programmatically.
78-
79-
You should use the File API to interact with the files. The following example shows how to create a [ref to the DOM node](/docs/refs-and-the-dom.html) to access file(s) in a submit handler:
77+
En React, un `<input type="file" />` siempre es un componente no controlado porque su valor solo puede ser establecido por un usuario, y no mediante programación.
8078

79+
Debes utilizar la API File para interactuar con ellos. El siguiente ejemplo muestra cómo crear un [referencia al nodo DOM](/docs/refs-and-the-dom.html) para acceder a los archivos en un controlador de envío:
8180
`embed:uncontrolled-components/input-type-file.js`
8281

8382
[](codepen://uncontrolled-components/input-type-file)
84-

0 commit comments

Comments
 (0)