首頁猿問如何使用 onChange...

如何使用 onChange 事件對多個輸入的值求和 | 反應JS

JavaScript

收到一只叮咚 2022-07-08 17:47:02

我有多個輸入，用戶用數字填充這些輸入。當用戶輸入任何輸入時，我需要一種方法來總結這些輸入的值。我的代碼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，因為當輸入值發生更改時執行方法。

查看完整描述

3 回答

絕地無雙

TA貢獻1946條經驗獲得超4個贊

你不能改變狀態值。
狀態更新是異步的。
您無需使用每個 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)

}

反對回復 2022-07-08

蕪湖不蕪

TA貢獻1796條經驗獲得超7個贊

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>

);

};

對于一些其他人提到的一些關鍵問題：

不要直接改變狀態，使用 set_xxx 來更新狀態。
你設置 type="number" 所以默認狀態必須是數字，即 sales: 0
如果是數字，請記住將值解析為 int。

反對回復 2022-07-08

吃雞游戲

TA貢獻1829條經驗獲得超7個贊

嘗試這個：

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)

}

備注：在評論中使用 Chris G. 建議

反對回復 2022-07-08

3 回答
0 關注
173 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用 onChange 事件對多個輸入的值求和 | 反應JS

如何使用 onChange 事件對多個輸入的值求和 | 反應JS

3 回答

添加回答