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