Javascript 如何用React钩子求两个输入的和？

我试图对两个输入求和，并用一个按钮给出一个结果，我已经定义了状态挂钩，它们可以工作，但我不知道如何将当前状态传递给函数并求和。 你能帮帮我吗？ 我是初学者 这是我的密码：

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

从“React”导入React；
导出默认函数Suma（）{
//钩子定义
常量[input，setInput]=React.useState({
num1:“”，
num2:“”，
});
//处理输入更改
常量handleInput=函数（e）{
设置输入({
…输入，
[e.target.name]：e.target.value
});
};
//suma函数
const suma=函数（）{
}
返回(
+
结果多
)
};

从“React”导入React；
导出默认函数Suma（）{
//钩子定义
常量[input，setInput]=React.useState({
num1:“”，
num2:“”，
});
const[sum，setSum]=React.useState（未定义）
useffect（（）=>{
setSum（parseInt（input.num1）+parseInt（input.num2））
}，[输入]）
//处理输入更改
常量handleInput=函数（e）{
设置输入({
…输入，
[e.target.name]：e.target.value
});
};
返回(
+
{sum！==未定义&&{sum}
)
};

如果您只想在单击时显示结果，我认为这应该足够了

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

导出默认函数Suma（）{
//钩子定义
常量[input，setInput]=React.useState({
num1:“”，
num2:“”，
});
const[result，setResult]=React.useState（“”）
//处理输入更改
常量handleInput=函数（e）{
设置输入({
…输入，
[e.target.name]：e.target.value
});
};
//suma函数
const suma=函数（）{
常量{num1，num2}=输入；
setResult（Number（num1）+Number（num2））；
}
返回(
+
resultado:{result}
)
};

您可以使用

usemo

钩子将值返回常量，而不必使用

useffect

和

useState

，即

const result=usemo（（）=>（parseInt（input.num1）+parseInt（input.num2）），[input]）