Referencia

<textarea>

Para mostrar un text area, renderiza el componente .

Props

<textarea> soporta todas

Puedes pasando la prop value:

  • value: Un string. Controla el texto dentro del text area.

Cuando pasas value, también debes pasar un controlador onChange que actualice el valor proporcionado.

En cambio, si tu <textarea> no es controlado, puedes pasar la prop defaultValue:

  • defaultValue: Un string. Especifica para un text area.

Estas props de <textarea> son relevantes tanto para text areas controlados como no controlados:

  • : Puede ser 'on' u 'off'. Especifica el comportamiento de autocompletar.
  • : Un booleano. Si es true, React enfocará el elemento en el montaje.
  • children: <textarea> no acepta hijos. Para establecer el valor inicial, utiliza defaultValue.
  • : Un número. Especifica el ancho por defecto en anchos promedio de caracteres. Por defecto es 20.
  • : Un booleano. Si es true, el input no será interactivo y aparecerá atenuado.
  • : Un string. Especifica el id del <form> al que este input pertenece. Si es omitido, es el formulario padre más cercano.
  • : Un número. Especifica la longitud máxima del texto.
  • : Un número. Especifica la longitud mínima del texto.
  • : Un string. Especifica el nombre para este input que es .
  • onChange: Una función . Requerida para . Es ejecutada inmediatamente cuando el valor del input es modificado por el usuario (por ejemplo, es ejecutada con cada pulsación de tecla). Se comporta como el del navegador.
  • onChangeCapture: Una versión de onChange que es ejecutada en la .
  • : Una función . Es ejecutada inmediatamente cuando el valor es cambiado por el usuario. Por razones históricas, en React es idiomático usar onChange en su lugar, el cual funciona de manera similar.
  • onInputCapture: Una versión de onInput que es ejecutada en la .
  • : Una función . Es ejecutada si la validación de un input fracasa al enviar el formulario. A diferencia del evento invalid que viene integrado, el evento onInvalid de React se propaga.
  • onInvalidCapture: Una versión de onInvalid que es ejecutado en la .
  • : Una función . Es ejecutada después de que la selección dentro de <textarea> cambia. React extiende el evento onSelect para que también sea ejecutado para selecciones vacías y en ediciones (las cuales puede afectar la selección).
  • onSelectCapture: Una versión de onSelect que es ejecutada en la .
  • : Un string. Mostrado en un color atenuado cuando el valor del text area está vacío.
  • : Un booleano. Si es true, el text area no puede ser editado por el usuario.
  • : Un booleano. Si es true, el valor debe ser proporcionado para que el formulario sea enviado.
  • : Un número. Especifica la altura por defecto en promedio de altura de carácter. El valor por defecto es 2.
  • : Puede ser 'hard', 'soft', u 'off'. Especifica cómo debe envolverse el texto al enviar un formulario.

Advertencias

  • No es permitido pasar un hijo como <textarea>algo</textarea>.
  • Si un text area recibe una prop value string, este será
  • Un text area no puede ser controlado y no controlado a la vez.
  • Un text area no puede alternar entre ser controlado o no controlado a lo largo de su vida.
  • Todo text area controlado necesita un controlador de evento onChange que actualice su valor de manera síncrona.

Uso

Mostrar un text area

Renderiza <textarea> para mostrar un text area. Puedes especificar su tamaño por defecto con los atributos y , pero por defecto el usuario será capaz de modificar su tamaño. Para deshabilitar la modificación de tamaño, puedes especificar resize: none en el CSS.

Proporcionar un label para un text area

Típicamente, colocarás todos los <textarea> dentro de una etiqueta . Esto le indica al navegador que este label está asociado con ese text area. Cuando el usuario haga click en el label, el navegador enfocará el text area. Esto también es esencial para accesibilidad: un lector de pantallas anunciará el texto del label cuando el usuario enfoque el text area.

Si no puedes anidar el <textarea> dentro de un <label>, asócialos pasando el mismo identificador a <textarea id> y Para evitar conflictos entre instancias de un componente, genera un identificador con

Proporcionar un valor inicial para un text area

Opcionalmente puedes especificar el valor inicial de un text area. Pásalo a través de la prop defaultValue.

Leer el valor de text area al enviar un formulario

Agrega un alrededor de tu text area con un dentro. Este llamará a tu controlador de evento <form onSubmit>. Por defecto, el navegador enviará los datos del formulario a el URL actual y actualizará la página. Puedes sobrescribir ese comportamiento llamando e.preventDefault(). Para leer los datos del formulario, usa .

Controlar un text area con una variable de estado

Un text area como <textarea /> es no controlado. Incluso si como <textarea defaultValue="Texto inicial" />, tu JSX solo especifica el valor inicial, no el valor actual.

Para renderizar un text area controlado, pásale la prop value. React forzará al text area a siempre tener value que pasaste. Normalmente, controlarás un text area declarando una

Esto es útil si quieres re-renderizar alguna parte de la IU cada vez que una tecla sea pulsada.

Solución de problemas

Mi text area no se actualiza cuando escribo en él

Si renderizas un text area con value pero sin onChange, verás un error en la consola:

Console
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.
(Traducción)
Proporcionaste una prop value a un campo de formulario sin un controlador onChange. Esto renderiza un campo de solo lectura. Si el campo debe ser mutable usa defaultValue. En caso contrario, establece onChange o readOnly.

Como sugiere el mensaje de error, si solo quisiste solo debes pasar defaultValue:

Si quieres especifica un controlador onChange:

Si el valor es de sólo lectura intencionalmente, agrega la prop readOnly para evitar el error:

El caret de mi text area salta al inicio con cada pulsación de tecla

Si debes actualizar su variable de estado al valor del text area del DOM durante onChange.

No puedes actualizarlo a algo más que no sea e.target.value:

Tampoco puedes actualizarlo de manera asíncrona:

Para arreglar tu código, actualízalo de manera síncrona a e.target.value:

Si esto no arregla el problema, es posible que el text area esté siendo removido y agregado nuevamente al DOM con cada pulsación de tecla. Esto puede suceder si estás accidentalmente en cada re-renderización. Por ejemplo, esto puede suceder si el text area o uno de sus padres siempre recibe un atributo key diferente, o si anidas definiciones de componentes (lo cual no está permitido en React y causa que el componente de “adentro” sea re-montado en cada renderización).

Estoy obteniendo un error: “A component is changing an uncontrolled input to be controlled”

Si proporcionas un value al componente, este valor debe mantenerse como string durante todo su tiempo de vida.

No puedes pasar value={undefined} primero y después pasar value="un string" porque React no sabrá si quieres que el componente sea controlado o no controlado. Un componente controlado siempre debe recibir un value string, no null o undefined.

Si tu value viene de una API o una variable de estado, esta podría ser inicializada como null o undefined. En ese caso, asígnala a un string vacío ('') inicialmente, o pasa value={someValue ?? ''} para asegurar que value es un string.