day 10 完结 ,增加统计金额

day 10 完结 ,增加统计金额

本节目标:增加统计金额

• 1.画页面

• src\components\AmountBox.js:

• import React from "react";
  /* 
  内插变量
  */
  const AmountBox = ({ text ,type}) => {
    return (
      <div className="col">
        <div className="card">
          {/* <div className="card-header bg-success text-white" > */}
          <div className={`card-header bg-${type} text-white`}>
            {text}
          </div>
          <div className="card-body">78</div>
        </div>
      </div>
    );
  };
  
  export default AmountBox;
  
  

• src\components\Records.js

import React, { Component } from "react";
...
import RecordForm from "./RecordForm";
import AmountBox from "./AmountBox";

class Records extends Component {
  constructor() {...}

  componentDidMount() {...}
  addRecord(record) {...}
  updateRecord(record,data){...}
  deleteRecord(record){...}
  render() {...}
    return (
      <div>
        <h2>Records</h2>
        <div className="row mb-3">
          <AmountBox text="Credit" type="success"/>
          <AmountBox text="Debit" type="danger"/>
          <AmountBox text="Balance" type="info"/>
        </div>
        <RecordForm handleNewRecord={this.addRecord.bind(this)} />
        {recordsComponents}
      </div>
    );
  }
}
export default Records;

这里画出了页面

• 2.添加函数
• credits()
• debits()
• balance()

src\components\Records.js:

import React, { Component } from "react";
import Record from "./Record";
import * as RecordsAPI from "../utils/RecordsAPI";
import RecordForm from "./RecordForm";
import AmountBox from "./AmountBox";

class Records extends Component {
  constructor() {...}

  componentDidMount() {...}
  addRecord(record) {...}
  updateRecord(record,data){...}
  deleteRecord(record){...}

  credits(){
    //1- 查找过滤出所有的正数
    //2- 将所有的正数相加

    let credits = this.state.records.filter((record)=>{
      return record.amount >= 0;
    });

    return credits.reduce((prev,curr)=>{
      return prev + Number.parseInt(curr.amount,0)
    },0)
  }


  debits(){
    let credits = this.state.records.filter((record)=>{
      return record.amount < 0;
    });

    return credits.reduce((prev,curr)=>{
      return prev + Number.parseInt(curr.amount,0)
    },0)
  }

  balance(){
    return this.credits() + this.debits();
  }

  render() {...}
    return (
      <div>
        <h2>Records</h2>
        <div className="row mb-3">
          <AmountBox text="Credit" type="success" amount = {this.credits()}/>
          <AmountBox text="Debit" type="danger" amount = {this.debits()}/>
          <AmountBox text="Balance" type="info" amount = {this.balance()}/>
        </div>
        <RecordForm handleNewRecord={this.addRecord.bind(this)} />
        {recordsComponents}
      </div>
    );
  }
}
export default Records;

改造src\components\AmountBox.js

import React from "react";
/* 
内插变量
*/
const AmountBox = ({ text ,type ,amount}) => {
  return (
    <div className="col">
      <div className="card">
        {/* <div className="card-header bg-success text-white" > */}
        <div className={`card-header bg-${type} text-white`}>
          {text}
        </div>
        <div className="card-body">
        {/* 78 */}
        {amount}
        </div>
      </div>
    </div>
  );
};

export default AmountBox;

最终效果

https://github.com/lenvo222/10_finish.git