如何使用 React 钩子对两个输入求和？

Question

i'm trying to sum two inputs and give a result with a button, i have defined the state hooks and they work but i don't know how to pass the current state to a function and sum it. Can you please help me? i'm a beginner here's my code:

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>
    )
};

Answer 1

If you only want to show the result on click, I think this should be enough

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(){
        const { num1, num2 } = input;
        setResult(Number(num1) + Number(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>resultado: {result}</span>
        </div>
    )
};

Answer 2

import React from 'react'; export default function Suma (){ //hook defined const [input, setInput] = React.useState({ num1: "", num2: "", }); const [sum, setSum] = React.useState(undefined) useEffect(() => { setSum(parseInt(input.num1) + parseInt(input.num2)) }, [input]) //handle input change const handleInput = function(e){ setInput({ ...input, [e.target.name]: e.target.value }); }; 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> {sum !== undefined && <span>{sum}</span>} </div> ) };

Answer 3

function AddForm() {
  const [sum, setSum] = useState(0);
  const [num, setNum] = useState(0);

  function handleChange(e) {
    setNum(e.target.value);
  }

  function handleSubmit(e) {
    setSum(sum + Number(num));
    e.preventDefault();
  }

  return <form onSubmit={handleSubmit}>
  <input type="number" value={num} onChange={handleChange} />
  <input type="submit" value="Add" />
  <p> Sum is {sum} </p>
  </form>;
}