I have developed a cooperative management system with hooks.
I am trying calculate the total of the input type number .
import React, { useState } from "react";
function PercentageQuestion(props) {
const [col, setCol] = useState(2);
const [total, setTotal] = useState(0);
const handleTotal = () => {
let inputs = document.querySelectorAll('[name ="qty"]');
let totalVal = 0;
for (var i = 0; i < inputs.length; i++) {
totalVal += inputs[i].value;
setTotal(totalVal);
}
};
const width = {
width: `${100 / col}%`,
};
const { onChange, question, values } = props;
const { id, uiType, questionString, options } = question;
return (
<div>
<div>
<p className="quiz-title">{questionString}</p>
<p className="quiz-info">
<i className="fa fa-info-circle" aria-hidden="true"></i>{" "}
<span> The sum of GRIP stages must total 100%.</span>
</p>
<div className="percentage-group" onChange={handleTotal}>
{options.map((opt, index) => (
<div key={index} style={width}>
<span className="valuePadding input-holder">
<input
id={opt.id}
className="input"
type="number"
name="qty"
min="0"
max="100"
onChange={onChange}
value={opt.value}
onblur={handleTotal}
/>
</span>
{opt.text}
</div>
))}
<span className="valuePadding input-holder">
<input type="number" name="x" id="total" disabled />
{total}
</span>
GRIP TOTAL
</div>
</div>
</div>
);
}
export default PercentageQuestion;