Javascript 单一责任原则反应重构

了解单一责任原则后，我需要将逻辑与呈现分开。这段代码接受输入并计算你能负担得起的住房抵押贷款利率。我正在努力思考如何以最佳方式重构以下代码，并使代码易于阅读和重用。有什么想法吗

 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;

import React，{Component}来自'React'；
类MonthlyPay扩展组件{
状态={
成本：0，
房屋成本：0，
首期付款：0，
termOfLoan:0，
年利率：0
}
HandleHouse成本变化=（e）=>{
这是我的国家({
房屋成本：即目标价值，
});
}
已处理的付款=（e）=>{
这是我的国家({
首付：e.target.value，
});
}
HandleanAnaLinterester=（e）=>{
这是我的国家({
年度利率：即目标价值，
});
}
handleTermOfLoan=（e）=>{
这是我的国家({
目标价值，
});
}
handleCostChange=（）=>{
const{房屋成本、首付款、期限、年度利息}=本州；
const principal=房屋成本-首付款
const lengthOfLoan=12*termOfLoan；
常数百分比=年利率/1200
控制台日志（lengthOfLoan）；
//公式M=P[i（1+i）^n]/[（1+i）^n-1]
const cost=（principal*percentageRate）/（1-（Math.pow（（1+percentageRate），lengthOfLoan*-1））.toString（）；
这是我的国家({
成本：固定成本（2）
})
}
render（）{
返回(
房屋成本
此.handlehouse成本变化（e）}>
首付款
此.handleDownPayment（e）}>
按揭期（年）
这个.handleTermOfLoan（e）}>
利率
这个.handleanualinterestrate（e）}>
算计
{this.state.cost}
);
}
}
导出默认月付款；

我会做两件事。 首先将handleCostChange移动到其他非react文件。 我通常有一个名为utils的文件夹，在那里我保存着复杂的方程。 然后您可以像这样导入它：

从“../utils/CostCalculations.js”导入{calculateCostChange}

或者类似的

其次，您可能不需要所有这些简单的状态写入函数。相反，您可以使用一个函数，该函数接受一个键和值，并以这种方式保存状态：

handleStateChange = (key, value) => {
  let mystate =  this.state;
  mystate[key] = value
  this.setState(mystate);
}

这将在您的状态中更新或创建一个键值对，您可以这样调用它：

---

onChange={（e）=>this.handleStateChange（'houseCost'，e）

请不要在阅读第一句后立即将此答案标记为无用：）可能有一些东西您可以使用

让我们看一下React文档。有一小部分描述了框架的原理：

React包含这样一个事实：呈现逻辑本质上是耦合的 与其他UI逻辑：如何处理事件、状态如何更改 随着时间的推移，以及数据准备显示的方式

而不是通过放置标记和 在独立文件中的逻辑，React通过松散耦合分离关注点 称为“组件”的单元，包含两个组件

他们建议让您对这些设计决策感到更舒适

另一点是，如果您有用于获取数据（比如说与后端通信）的逻辑以及UI逻辑，那么React对此有一些建议

有一种称为

presentational components

和

container components

基本上

呈现组件-事物的外观（标记、样式）

及

容器组件-工作原理（数据获取、状态更新）

我建议你看看，他有点像绝地武士：）

在这里你可以找到两者的代码示例，我真的认为花几分钟在这里是值得的

我不认为仅仅将代码进行重构是一个好主意，我相信如果你想创建更好的应用程序，这些资源对你来说会更有价值

---

Happy hacking:）

谢谢！第二个handleStateChange建议不起作用-函数返回nan。当我检查输入元素时，它的值更改为SyntheticEvent是的，inputs onChange会生成事件。您必须从事件目标获取值。以下是一个示例：