首页 资讯 农业 汽车 房产 科技 养老 教育 展会 自媒体
智能 互联网 摄影 手机 VR

day 10 完结 ,增加统计金额

来源:互联网 作者:高晓娜 人气: 发布时间:2018-10-31

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35812380/article/details/83542687



day 10 完结 ,增加统计金额
本节目标:增加统计金额
0901


1.画页面


srccomponentsAmountBox.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;




srccomponentsRecords.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;


这里画出了页面
0901

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

srccomponentsRecords.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;


改造srccomponentsAmountBox.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;


最终效果
0902
Edit 10-finish
https://github.com/lenvo222/10_finish.git







免责声明:本文仅代表作者个人观点,与华纳网无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
责任编辑:高晓娜
地址: 辽宁省大连市中山区港湾街20号名仕财富中心B座1517室 联系电话: 0411-84950851
© 2017 大连华纳文化传媒有限公司 All rights reserved
经营许可证编号:辽B2-20170212 备案号:辽ICP备17007383号-2
辽公网安备 21021102000241