用react写一个的财务系统，系统有添加，删除，更改数据,以及计算出金额的变化

项目主要实现功能

创建项目

使用create-react-app创建项目基本骨架

项目结构

Record.js 可以添加数据

addRecord(record) {this.setState({  error: null,  isLoaded: true,  //添加数据  records: [    ...this.state.records,    record  ]})复制代码

}

Records.js中建立数据的表单，有修改和删除功能

删除 函数；使用filter

deleteRecord(record) {const recordIndex = this.state.records.indexOf(record);const newRecords = this.state.records.filter((item, index) =>{  if (recordIndex !== index) {    return item;  }});this.setState({  records: newRecords})复制代码

}

修改函数；使用map遍历

updateRecord(record, data) {const recordIndex = this.state.records.indexOf(record);const newRecords = this.state.records.map((item, index) =>{  if(index !== recordIndex) {    return item;  }  return {    ...item,     ...data  }  // data覆盖原来的数据}复制代码

);

金额的变化计算，分别计算出收入输出的金额，在彼此相加，输入输出技术函数时一样的方法

输入金额计算函数

credits(){let credits = this.state.records.filter((record) => {  return record.amount > 0;})return credits.reduce((prev, curr) => {  return prev + Number.parseInt(curr.amount, 0)}, 0)复制代码

}

github地址：