4 - Captura de eventos

Los nombres de eventos en React comienzan con "on" y luego el primer caracter de cada palabra en mayúsculas:

onClick
onDoubleClick
onMouseEnter
onMouseLeave
onMouseMove
onKeyPress
onKetUp
onSubmit
etc.

Problema

Disponer dos controles de formulario HTML input="number" y un botón. Al presionar el botón mostrar en un alert su suma.

Crear con la aplicación create-react-app el proyecto003.

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

class App extends Component {
  constructor(props) {
    super(props)
    this.presion = this.presion.bind(this);
  }

  render() {
    return (
      <div>
        <form onSubmit={this.presion}>
          <p>Ingrese primer valor:
            <input type="number" name="valor1" />
          </p>
          <p>Ingrese segundo valor:
            <input type="number" name="valor2" />
          </p>        
          <p>
            <input type="submit" value="Sumar" />
          </p>
        </form>
      </div>
    );
  }

  presion(e) {
    e.preventDefault();
    const v1=parseInt(e.target.valor1.value, 10);
    const v2=parseInt(e.target.valor2.value, 10);
    const suma=v1+v2;
    alert('La suma es:'+suma);
  }
}

export default App;

Cuando ejecutamos la aplicación luego de cargar los dos enteros y presionar el botón 'submit' tenemos:

formularios react

Lo más importante en este problema es ver como enlazamos el evento onSubmit con el método presion. Lo primero es definir en el contructor la referencia del método presion que devuelve el método bind:

  constructor(props) {
    super(props)
    this.presion = this.presion.bind(this);
  }

En el método render inicializamos el evento onSubmit con la referencia del método presion:

        <form onSubmit={this.presion}>

El método presion propiamente dicho primero detiene el envío de datos al servidor llamando a preventDefault, luego recupera los dos valores ingresados por teclado y muestra su suma:

  presion(e) {
    e.preventDefault();
    const v1=parseInt(e.target.valor1.value, 10);
    const v2=parseInt(e.target.valor2.value, 10);
    const suma=v1+v2;
    alert('La suma es:'+suma);
  }

El objetivo de este concepto es ver un poco la sintaxis como enlazar un evento que dispara un control HTML y el método que lo captura.

En conceptos futuros analizaremos cada uno de los controles de formulario y como procesarlos.