Javascript 如何使用onChange事件| ReactJS对多个输入值求和

我有多个输入，用户用数字填充这些输入。当用户输入任何输入时，我需要一种方法来总结这些输入的值

我的代码

const [values,set_values] = useState({
    sales:'',
    bank_deposit:'',
    supply:'',
    expenses:''
})

const values_handler = (e) => {
    let name= e.target.name;
    let value= e.target.value;
    values[name]=value;
    set_values(values)

    // Calling the method to sum the value
    calc_total(value) 
}

const [total,set_total]=useState(0);

const calc_total = (value) => {
    total +=value;
    set_total(total)
}

<input type='number' onChange={value_handler} name='sales' />
<input type='number' onChange={value_handler} name='bank_deposit' />
<input type='number' onChange={value_handler} name='supply' />
<input type='number' onChange={value_handler} name='expenses' />

const[values，set_values]=useState({
销售：''，
银行存款：''，
供应：''，
费用：''
})
常量值\u处理程序=（e）=>{
让name=e.target.name；
设值=e.target.value；
值[名称]=值；
设置_值（值）
//调用方法对值求和
计算总数（价值）
}
const[total，set_total]=useState（0）；
常量计算总计=（值）=>{
总+=价值；
集合_总计（总计）
}

问题

问题在于，每次输入值出现变化时，值都会被求和，因此，如果用户输入15，则会求和1，然后求和5，因为该方法是在输入值发生变化时执行的。

尝试以下方法：

const [values,set_values] = useState({
    sales:'',
    bank_deposit:'',
    supply:'',
    expenses:''
})

const values_handler = (e) => {
    let name= e.target.name;
    let value= e.target.value;
    set_values({...values , [name]: value})

// Calling the method to sum the value
calc_total(values) 
}

const [total,set_total]=useState(0);

const calc_total = (values) => {
    aux = 0
    for (var key in values){
        aux += values[key]
    }
    set_total(aux)
}

<input type='number' onChange={value_handler} name='sales' />
<input type='number' onChange={value_handler} name='bank_deposit' />
<input type='number' onChange={value_handler} name='supply' />
<input type='number' onChange={value_handler} name='expenses' />

const[values，set_values]=useState({
销售：''，
银行存款：''，
供应：''，
费用：''
})
常量值\u处理程序=（e）=>{
让name=e.target.name；
设值=e.target.value；
设置值（{…值，[名称]：值}）
//调用方法对值求和
计算总数（数值）
}
const[total，set_total]=useState（0）；
常量计算总计=（值）=>{
aux=0
for（var输入值）{
aux+=值[键]
}
集合_总计（辅助）
}

备注: 在评论中使用Chris G.建议

不能改变状态值

状态更新是异步的

您不需要使用每个onChange的值，而是使用状态值来更新总值

假设你想计算销售额、银行存款、供应和费用的总和，你可以从各州得到它们，如下所示

const [values,set_values] = useState({
    sales:'',
    bank_deposit:'',
    supply:'',
    expenses:''
})

const values_handler = (e) => {
    let name= e.target.name;
    let value= e.target.value;
    const newValues = {
        ...values,
        [name]: value
    } 
    set_values(newValues)

    // Calling the method to sum the value
    calc_total(newValues) 
}

const [total,set_total]=useState(0);

const calc_total = (newValues) => {
    const { sales, bank_deposit, expenses, supply} = newValues;
    const newTotal = parseInt(sales) + parseInt(bank_deposit) + parseInt(expenses) + parseInt(supply)
    setTotal(newTotal)

} 

<input type='number' onChange={value_handler} name='sales' />
<input type='number' onChange={value_handler} name='bank_deposit' />
<input type='number' onChange={value_handler} name='supply' />
<input type='number' onChange={value_handler} name='expenses' />

const[values，set_values]=useState({
销售：''，
银行存款：''，
供应：''，
费用：''
})
常量值\u处理程序=（e）=>{
让name=e.target.name；
设值=e.target.value；
常量newValues={
价值观
[名称]：值
} 
设置_值（新值）
//调用方法对值求和
计算总数（新值）
}
const[total，set_total]=useState（0）；
常量计算总计=（新值）=>{
const{销售、银行存款、费用、供应}=新价值；
const newTotal=parseInt（销售）+parseInt（银行存款）+parseInt（费用）+parseInt（供应）
setTotal（新总数）
} 

const Solution=（）=>{
常量[输入值，设置值]=useState({
销售额:0，
银行存款：0，
供应量：0，
费用：0
});
const[total，set_total]=useState（0）；
useffect（（）=>{
常量arrValues=对象值（输入值）；
const inputTotals=arrValues.reduce（（累计，当前）=>（累计+=当前），0）；
设置总计（输入总计）；
}，[输入_值]；
常量changeValues=（{name，value}）=>{
设置输入值（{…输入值，[名称]：parseInt（值）}）；
};
返回(
{total}
更改值（目标）}
name=“销售”
/>
更改值（目标）}
name=“银行存款”
/>
更改值（目标）}
name=“供应”
/>
更改值（目标）}
name=“费用”
/>
);
};

对一些人来说，其他人提到的一些关键问题：

• 不要直接改变状态，使用set_xxx更新状态
• 您设置type=“number”，因此默认状态必须为数字，即销售：0
• 如果是数值，请记住将值解析为int

---

值[名称]=值更改状态；你不应该这样做。@ChrisG This在values数组中为其元素赋值。我知道你想做什么，我告诉你，在React中不允许这样做。您需要创建一个值的副本，更改副本的编号，然后调用
set_values（）
传递副本。@ChrisG如果您能回答它，那就太好了，这样我们就可以从这个问题中受益，因为我搜索了如何做，但没有得到明确的答案，所以我提出了这个简单的问题，让每个人都能理解它。我用problemRight更新了这个问题，你这样做是为了帮助别人。这里的问题是，您的代码甚至没有尝试将实际状态的值相加。这样做：
values
不是一个数组。
calc\u total
正在添加string更新我的答案，我之前只是假设细节没有那么重要；-）OP希望在银盘上运行代码，那么为什么不为他们多做一点呢；）
const Solution = () => {
  const [input_values, set_inputvalues] = useState({
    sales: 0,
    bank_deposit: 0,
    supply: 0,
    expenses: 0
  });

  const [total, set_total] = useState(0);

  useEffect(() => {
    const arrValues = Object.values(input_values);
    const inputTotals = arrValues.reduce((accum, curr) => (accum += curr), 0);
    set_total(inputTotals);
  }, [input_values]);

  const changeValues = ({ name, value }) => {
    set_inputvalues({ ...input_values, [name]: parseInt(value) });
  };

  return (
    <div>
      <h1>{total}</h1>
      <input
        type="number"
        onChange={({ target }) => changeValues(target)}
        name="sales"
      />
      <input
        type="number"
        onChange={({ target }) => changeValues(target)}
        name="bank_deposit"
      />
      <input
        type="number"
        onChange={({ target }) => changeValues(target)}
        name="supply"
      />
      <input
        type="number"
        onChange={({ target }) => changeValues(target)}
        name="expenses"
      />
    </div>
  );
};