从用户输入的数组中获取总值

Question

在我的反应应用程序中，我有一些输入框供用户输入值，当他们按下 tambah 按钮时，值将显示在表格中。我正在尝试在表格底部创建一个总行来计算 jumlah 中的值的总和，并在每次输入新数据时更新显示的值。

下面是我的代码

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
    }   
  } 
 
  setValueState(event){ 
    this.setState({ 
      [event.target.name] : event.target.value 
    }) 
  }

  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() { 
    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> 
                              ))} 
                      </tbody> 
                      <tr>Total :</tr>
                </table>
        </div> 
    ); 
    } 
  };
  
export default App;

Answer 1

import { toDate } from 'date-fns';
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() { 
    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> 
                    ))} 
                    {nilaiArray.length > 0 &&
                    <tr>
                        <td colSpan="3">Total:</td>
                        <td>
                          {nilaiArray.reduce(add, 0)}
                        </td>
                    </tr>
                    }
                </tbody> 
            </table>
        </div> 
    ); 
    } 
  };
  
export default App;