0

Tengo un un formulario que tiene que registrar información en unos input, y que al darse el evento onChange de estos input en otros input cargue información. Ejemplo:

input type="number" onChange={this.handleNumeroA} value={this.state.numeroA} 
input type="number" onChange={this.handleNumeroB} value={this.state.numeroB} 

input type="number" readOnly onChange={this.resultado} value={this.state.resultado} 

En los eventos handleNumeroA y handleNumeroB deben recibir con e.target.value los números que se registren por el usuario. Pero al terminar debe presentar el resultado por decir de la suma de estos 2 números.

Como se puede resolver? Tal vez haciendo que el evento de handleNumeroB tenga el action que haga el setState del estado resultado??

He leído por ejemplo sobre los métodos React.component que podría ayudar componentDidUpdate pero no tengo claro como se usa.

1 respuesta 1

0

Si quieres hacer el ejemplo de la suma, solo es necesario guardar en el state los valores de NumeroA y NumeroB, y en cada uno poner el mismo handler:

constructor(){
  // En el estado solo ponemos las variables necesarias:
  this.state = { A: 0, B: 0 };

  // Aseguramos el handler para los eventos onChange:
  this.handleInputChange = this.handleInputChange.bind(this);
}

// Escribimos este método genérico para controlar los cambios en cualquier input:
handleInputChange(e){
  const target = e.target;
  const name = target.name;
  const value = target.value;
  this.setState({ [name]: value });
}

render(){
  // La suma no necesita ser parte del estado, la podemos definir aquí:
  let suma = parseInt(this.state.A) + parseInt(this.state.B);
  return(
    <form>
      <label htmlFor="NumA">Número A:</label>
      <input name="A" onChange={this.handleInputChange} value={this.state.A} id="NumA" />
      <label htmlFor="NumB">Número B:</label>
      <input name="B" onChange={this.handleInputChange} value={this.state.B} id="NumB" />
      <label htmlFor="NumSum">SUMA:</label>
      <input value={suma} id="NumSum" />
    </form>
  );
}

Te recomiendo leer:


Respecto a ComponentDidUpdate y símiles, estás entrando a otro terreno.

ComponentDidUpdate es parte del ciclo de vida de los componentes de React, el cual básicamente funciona así:

Montaje

  1. Se llama al constructor del componente, donde se inicializa el state.
  2. Antes de montar el elemento se llama a ComponentWillmount (antes del primer render). Nada importante a destacar aquí; de hecho en la documentación dice:

    Evita introducir cualquier acción de efectos secundarios o suscripciones (Ajax para los cuates) en este método. Para esos casos, use ComponentDidMount en su lugar. .

  3. Se ejecuta el primer render que pintará el elemento en pantalla.
  4. Si es necesario obtener información desde el servidor (Ajax), se ejecuta ComponentDidMount. Aquí puedes cambiar el estado inicial.

Una vez montado el elemento, puede comenzar el ciclo de

Actualización

  1. ComponentWillReceiveProps(nextProps) será invocado si las props del elemento cambian.

    Si necesitas actualizar el estado en respuesta a cambios en los props (por ejemplo, para resetearlo), debes comparar this.props y nextProps y ejecutar las transiciones de estado usando this.setState() en este método.

  2. Para validar si el cambio de estado afectará la interfaz, puedes utilizar shouldComponentUpdate que debe devolver true o false indicando si el elemento debe volver a invocar a render o no.
  3. Si no usamos el método anterior, o si retornó true, pasamos a ComponentWillUpdate. Nada destacable aquí, solo que no debes invocar a this.setState aquí.
  4. Se ejecuta nuevamente el render con los cambios aplicados.
  5. Puedes ejecutar cualquier validación extra después del renderizado en ComponentDidUpdate. Nada destacable aquí tampoco, pero puede servirte si combinas React con jQuery.

Si necesitas hacer algo antes de que el elemento sea destruido, puedes utilizar ComponentWillUnmount y también tienes ComponentDidCatch para control de errores.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.