如何使用 React 鈎子對兩個輸入求和？

Question

我正在嘗試將兩個輸入相加並通過按鈕給出結果，我已經定義了 state 掛鈎並且它們可以工作，但我不知道如何將當前的 state 傳遞給 ZC1C425268E68385D1AB5074C17A。 你能幫我么？ 我是初學者，這是我的代碼：

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

如果您只想在點擊時顯示結果，我認為這應該足夠了

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