14 - Formularios: control textarea

Para enlazar un control HTML de tipo textarea debemos definir la propiedad value en forma similar a los controles input que hemos visto hasta ahora.

Problema

Mostrar un control de tipo textarea. Cada vez que se ingrese un caracter actualizar la cantidad ingresados dentro del control.

Como primer paso creamos una aplicación con create-react-app proyecto014

App.js

import { useState } from 'react';

function App() {
  const [texto, setTexto] = useState('')

  function cambioTexto(e) {
    setTexto(e.target.value)
  }

  return (
    <div>
      <p><textarea value={texto} onChange={cambioTexto} cols="100" rows="5"></textarea></p>
      <p>Cantidad de caracteres ingresados: {texto.length}</p>
    </div>
  );
}

export default App;

En la variable de 'estado' almacenamos un string inicialmente vacío:

  const [texto, setTexto] = useState('')

En bloque JSX disponemos un control de tipo 'textarea' e inicializamos la propiedad 'value' con el 'estado' y escuchamos eventos de cambio para procesar la entrada de datos y sincronizar el 'estado':

  return (
    <div>
      <p><textarea value={texto} onChange={cambioTexto} cols="100" rows="5"></textarea></p>
      <p>Cantidad de caracteres ingresados: {texto.length}</p>
    </div>
  );

Cada vez que produce un cambio el operador dentro del 'textarea' se ejecuta la función 'cambiarTexto' donde actualizamos el 'estado' llamando a la función 'setTexto':

  function cambioTexto(e) {
    setTexto(e.target.value)
  }

En pantalla tenemos como resultado:

Problema propuesto

Modificar el ejercicio anterior disponiendo dos controles de tipo 'textarea', de tal forma que lo que se cargue en uno se refleje en forma inmediata en el otro.