我想显示 3 个或三个以上输入字段的总和加法,加法自动添加到总计输入字段中

I want to display sum of 3 or more than three inputs fields Addition, and addition automatically added in total input field

我已经设置了他的状态,但是我没有得到输入数字相加的逻辑。 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'/>
)
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"
      />
    </>
  );
}