0

Estoy empezando a manejar states con React Hooks y me gustaría lograr la suma de dos inputs a traves de un botón. Hasta ahora manejo el onChange de los inputs , pero no se como sumar esos estados. Este es mi código:

import React from 'react';


export default function Suma (){
    //hook defined
    const [input, setInput] = React.useState({
        num1: "",
        num2: "",
    });

    //handle input change 

    const handleInput = function(e){
        setInput({
            ...input, 
            [e.target.name]: e.target.value
        });
    };

    //suma function

    const suma = function(){
     
    }

    return (
        <div>
            <input onChange={handleInput} name="num1" value={input.num1} type="text"></input>
            <input onChange={handleInput} name="num2" value={input.num2} type="text"></input>
            <button>+</button>
            <span>resultado</span>
        </div>
    )
};

1 respuesta 1

0

Esto debería de resolver el problema. Simplemente debes agregar el onClick para poder manejar cuando se haga click sobre el botón.

Ten en cuenta que lo que obtienes de los inputs es texto, por lo cual deberás transformarlo a

import React from 'react';

export default function Suma() {
  //hook defined
  const [input, setInput] = React.useState({
    num1: "",
    num2: ""
  });
  const [result, setResult] = React.useState();

  //handle input change

  const handleInput = function (e) {
    setInput({
      ...input,
      [e.target.name]: e.target.value
    });
  };

  //suma function

  const suma = function () {
    setResult((+input.num1) + (+input.num2));
  };

  return (
    <div>
      <input
        onChange={handleInput}
        name="num1"
        value={input.num1}
        type="text"
      ></input>
      <input
        onChange={handleInput}
        name="num2"
        value={input.num2}
        type="text"
      ></input>
      <button onClick={suma}>+</button>
      <span>{result}</span>
    </div>
  );
}

Aprovecho a dejarte un link al sandbox donde lo probe.

Cualquier otra duda, a la orden

2
  • Gracias ! Perdon la ignorancia pero que significa el + adelante de la variable ??
    – Florencia
    Commented el 16 ene. 2021 a las 18:51
  • Lo que hace es transformar la variable a númerica. Te dejo un link
    – luckongas
    Commented el 16 ene. 2021 a las 19:49

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.