Question

我编写了此函数，该函数根据房屋成本，预付款，年数和利率计算每月还款额。现在，我需要在此处添加一个摊销函数，以处理相同的输入，并可以使用类似于此处https://www.myamortizationchart.com/?p=100000&r=8&t=30&s=yearly的摊销填充表。我是React的新手，所以我在如何创建此函数方面苦苦挣扎，这样才有意义，以及它是否应作为单独的组件

import React, { Component } from 'react';


class MonthlyPay extends Component {
  state = {
    cost: 0,
    houseCost: 0,
    downPayment: 0,
    termOfLoan: 0,
    annualInterestRate: 0
  }
   handleHouseCostChange = (e) => {
        this.setState({
            houseCost: e.target.value,
        });
   }

   handleDownPayment = (e) => {
        this.setState({
            downPayment: e.target.value,
        });
   }

   handleannualInterestRate = (e) => {
        this.setState({
           annualInterestRate : e.target.value,
        });
   }

   handleTermOfLoan = (e) => {
        this.setState({
            termOfLoan: e.target.value,
        });
   }
   handleCostChange = () => {
        const { houseCost, downPayment, termOfLoan, annualInterestRate } = this.state;
        const principal = houseCost - downPayment
        const lengthOfLoan = 12 * termOfLoan;
        const percentageRate = annualInterestRate / 1200
        console.log(lengthOfLoan);
        // Formula M = P[i(1+i)^n]/[(1+i)^n -1]
        const cost = (principal * percentageRate) / (1 - (Math.pow((1 + percentageRate) , lengthOfLoan * -1))).toString();
        this.setState({
            cost: cost.toFixed(2)
        })
    }
  render() {
    return (
        <div className="counter">
          <div>
            <span className="counter-score">House Cost</span>
            <input type="number" placeholder="House Cost" onChange={(e) => this.handleHouseCostChange(e)}></input>
         </div>  
         <div>
            <span className="counter-score">Down Payment</span>
            <input type="number" placeholder="Down Payment" onChange={(e) => this.handleDownPayment(e)}></input>
        </div> 
        <div>
            <span className="counter-score">Mortgage Period (years)</span>
            <input type="number" placeholder="Mortgage Period" onChange={(e) => this.handleTermOfLoan(e)}></input>
        </div>
         <div>
            <span className="counter-score">Interest Rate</span> 
            <input type="number" placeholder="Interest Rate" onChange={(e) => this.handleannualInterestRate(e)}></input>
        </div> 
                <button className="counter-action" onClick={this.handleCostChange}>Calculate</button>
                <span className="counter-score">{ this.state.cost }</span>
            </div>
            );
  }
}

export default MonthlyPay;

Answer 1

有一个single responsibility principle。如果您遵循此原则，它将使您的代码具有更好的可重用性和可读性。

因此，要遵循它，我们需要两个实体：

用于计算摊销额的JS函数
反应组件以显示此数据

例如：

function calculateAmortizationPayments(inputData) {
  // ...
  return  [
    // each array represents data for a year
    { payments: 'val', yearlyTotal: 'val', principalPaid: 'val', interestPaid: 'val', balance: 'val' },
    { payments: 'val', yearlyTotal: 'val', principalPaid: 'val', interestPaid: 'val', balance: 'val' },
    { payments: 'val', yearlyTotal: 'val', principalPaid: 'val', interestPaid: 'val', balance: 'val' },
    // ...
  ]
}

class AmortizationPayments extends Component {
  render() {
    const paymentsByYear = calculateAmortizationPayments(inputData)

    return (
      <table>
        <thead>
          // ...
        </thead>
        <tbody>
          {paymentsByYear.map(year => (
            <tr key={...}>
              <td>{year.payments}</td>
              <td>{year.yearlyTotal}</td>
              <td>{year.principalPaid}</td>
              <td>{year.interestPaid}</td>
              <td>{year.balance}</td>
            </tr>
          ))}
        </tbody>
      </table>
    )
  }
}

MonthlyPay组件可遵循的相同原理-将逻辑与渲染分开。

React中的摊销函数

1 个答案: