我要显示3个或3个以上输入字段之和的加法，并将加法自动添加到总输入字段中

Question

我设置了状态，但是没有得到输入数字相加的逻辑。3个输入值由用户输入。

在下面的代码中，我想将number1+number2+number3相加，这三个数字的相加将自动显示在总输入字段中。

我的代码是:

import React, { useState } from 'react'
import '../App.css'
function AddForm() {
const [userData, setuserData] = useState({
number1:'',
number2:'',
number3'',
total''})
let name, value;
const postUserHandler=(e)=>{
name=e.target.name;
value=e.target.value;
setuserData({...userData,[name]:value})
}
const submitData=()=>{}
return(
<input  type="number" name='number1'value={userData.number1} onChange={postUserHandler} required='required'/>
<input  type="number" name='number2'value={userData.number2} onChange={postUserHandler} required='required'/>
<input  type="number" name='number3'value={userData.number3} onChange={postUserHandler} required='required'/>
<input  type="number" name='total'value={userData.total} onClick=(submitData) required='required'/>
)

Answer 1

import React, { useState } from "react";
import "../App.css";
function AddForm() {
const [userData, setuserData] = useState({
number1: "",
number2: "",
number3: "",
total: "",
});
let name, value;
const postUserHandler = (e, number) => {
name = e.target.name;
value = e.target.value;
setuserData({ ...userData, [name]: value });
let totalnumber = 0;
if (number == "number1") {
totalnumber =
parseInt(userData.number2) +
parseInt(userData.number3) +
parseInt(value);
} else if (number == "number2") {
totalnumber =
parseInt(userData.number1) +
parseInt(userData.number3) +
parseInt(value);
} else if (number == "number3") {
totalnumber =
parseInt(userData.number2) +
parseInt(userData.number1) +
parseInt(value);
}
setuserData({ ...userData, total: totalnumber });
};
const submitData = () => {};
return (
<>
<input
type="number"
name="number1"
value={userData.number1}
onChange={(e) => postUserHandler(e, "number1")}
required="required"
/>
<input
type="number"
name="number2"
value={userData.number2}
onChange={(e) => postUserHandler(e, "number2")}
required="required"
/>
<input
type="number"
name="number3"
value={userData.number3}
onChange={(e) => postUserHandler(e, "number3")}
required="required"
/>
<input
type="number"
name="total"
value={userData.total}
onClick={submitData}
required="required"
/>
</>
);
}