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 proyecto013

App.js


import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      texto: '',
    }
    this.cambioTexto = this.cambioTexto.bind(this);
  }
  render() {
    return (
      <div>
       <p><textarea value={this.state.texto} onChange={this.cambioTexto} cols="100" rows="5"></textarea></p>
       <p>Cantidad de caracteres ingresados: {this.state.texto.length}</p>        
      </div>
    );
  }

  cambioTexto(e) {
    this.setState( {
      texto: e.target.value,
    })
  }
}

export default App;

En el 'estado' almacenamos un string inicialmente vacío:

    this.state = {
      texto: '',
    }

En el método render 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':

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

Cada vez que produce un cambio el operador dentro del 'textarea' se ejecuta el método 'cambiarTexto' donde actualizamos el 'estado' llamando al método 'setState':

  cambioTexto(e) {
    this.setState( {
      texto: e.target.value,
    })
  }

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.