javascript - 如何使用 onChange 事件对多个输入的值求和 | 反应JS

Question

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

我的代码

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

问题

这样做的问题是，每次输入的值发生变化时，都会对这些值求和，因此，如果用户输入 15，则它总和为 1，然后是 5，因为当输入值发生更改时执行方法。

标签： javascriptreactjsreact-hooksonchange

Answer 1

• 你不能改变状态值。
• 状态更新是异步的。
• 您无需使用每个 onChange 的值，而是使用状态值来更新总值

假设您想要汇总 sales、bank_deposit、supply 和 expeses 值，您可以从各州获取它们，如下所示

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