我有 3 個標簽，可以在單擊按鈕時接收輸入，然后我需要從第三個輸入值中求和，代碼有點作業，但不是獲取第三個輸入的總和，而是看起來像下面的影像，其中輸入組合起來有點像一個字串（不知道如何稱呼它）。任何幫助表示贊賞 Total 的樣子
這是我的完整代碼
import React, { Component } from 'react';
import './Bootstrap/css/bootstrap.min.css';
class App extends Component {
constructor(){
super();
this.state = {
mahasiswa : [],
tgl : null,
nama : null,
nilai : null,
nilaiArray: []
}
}
setValueState(event){
var value = event.target.value
this.setState({
[event.target.name] : value
})
var nilaiArrayTmp = this.state.nilaiArray;
nilaiArrayTmp.push(value?parseFloat(value).toFixed(2):0)
this.setState({
nilaiArray: nilaiArrayTmp
})
}
addData(){
var data_tmp = this.state.mahasiswa;
data_tmp.push({nim : this.state.tgl, nama : this.state.nama, nilai : this.state.nilai});
this.setState({
mahasiswa : data_tmp
})
}
render() {
const total=(this.state.mahasiswa.reduce((total,{nilai}) => total = total nilai , 0 ));
return (
<div className="container">
<h2><b>Daftar Pengeluaran</b></h2>
<div className="form-container">
<div className="form-group">
<label>Waktu:</label>
<input type="text" name="tgl" value={this.state.tgl} onChange={this.setValueState.bind(this)} className="form-control" />
</div>
<div className="form-group">
<label>Deskripsi:</label>
<input type="text" name="nama" value={this.state.nama} onChange={this.setValueState.bind(this)} className="form-control" />
</div>
<div className="form-group">
<label>Jumlah:</label>
<input type="number" name="nilai" value={this.state.nilai} onChange={this.setValueState.bind(this)} className="form-control" />
</div>
<br />
<button onClick={this.addData.bind(this)} type="button" className="btn btn-primary">Tambah</button>
</div>
<br />
<table className="table">
<thead>
<tr>
<th>No.</th>
<th>Waktu</th>
<th>Deskripsi</th>
<th>Jumlah</th>
</tr>
</thead>
<tbody>
{this.state.mahasiswa.map((mhs, index)=>(
<tr key={index}>
<td>{index 1}</td>
<td>{mhs.tgl}</td>
<td>{mhs.nama}</td>
<td>{mhs.nilai}</td>
</tr>
))}
<tr>
<td></td>
<td></td>
<td>Total:</td>
<td>{total}</td>
</tr>
</tbody>
</table>
</div>
);
}
};
export default App;
uj5u.com熱心網友回復：
Inputbydefalult 將其輸入為string并將狀態也設定為String. 因為那個0 string=string并且你得到了一個字串。
它不是添加到 0，而是將 0 轉換為 a，string并將concatenating其余的值轉換為它。
您可以使用parseInt或parseFloat相應地將其用作Integer并獲得所需的結果。
const total=(this.state.mahasiswa.reduce((total,{nilai}) => total parseInt(nilai) , 0 ));
uj5u.com熱心網友回復：
parseFloat(value).toFixed(2) 回傳字串型別，而不是數字型別
setValueState(event){
var value = event.target.value
this.setState({
[event.target.name] : value
})
var nilaiArrayTmp = this.state.nilaiArray;
nilaiArrayTmp.push(value?parseFloat(value).toFixed(2):0) // <-- converted back to string type!
this.setState({
nilaiArray: nilaiArrayTmp
})
}
所以在陣列 reduce 回呼中，您正在進行字串連接。要解決，請將值轉換回數字時間以進行加法。不要改變total回傳的值，只回傳當前total值加上下一個nilai值。
const total = this.state.mahasiswa.reduce(
(total, { nilai }) => total Number(nilai),
0
);
狀態突變
在setValueState和addData處理程式中，您都在改變狀態物件，但直接推入陣列。
setValueState(event) {
var value = event.target.value
this.setState({
[event.target.name] : value
})
var nilaiArrayTmp = this.state.nilaiArray; // <-- reference to state
nilaiArrayTmp.push(value?parseFloat(value).toFixed(2):0) // <-- state mutation!!
this.setState({
nilaiArray: nilaiArrayTmp // <-- reference saved back into state
})
}
addData(){
var data_tmp = this.state.mahasiswa; // <-- reference to state
data_tmp.push({ // <-- state mutation!!
nim: this.state.tgl,
nama: this.state.nama,
nilai: this.state.nilai,
});
this.setState({
mahasiswa: data_tmp // <-- reference saved back into state
});
}
在這兩種情況下，您都應該使用功能狀態更新并回傳一個新的陣列參考。
setValueState(event) {
const { name, value } = event.target;
this.setState(prevState => ({
[name]: value,
nilaiArray: [
...prevState.nilaiArray,
value ? Number(value).toFixed(2) : 0,
],
}))
}
addData(){
this.setState({
mahasiswa: [
...prevState.mahasiswa,
{
nim: prevState.tgl,
nama: prevState.nama,
nilai: prevState.nilai,
}
],
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/370043.html