I have set he state, but I didn't get the logic of addition of input number. 3-input value is enter by user.

In following code, I want to add number1 number2 number3 and addition of this three number will automatically show in total input field.

my code is:

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'/>
)

CodePudding user response：

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