Question

功能handleCostChange应该基于输入来计算抵押付款。目前它返回NAN-我首先用JavaScript编写了它，并且效果很好。我试图找出从Javascript重构此函数并将其添加到我的React组件时出了什么问题。

import React, { Component } from 'react';

import Counter from './components/Counter';
import './App.css';

class App extends Component {
  state = {
    cost: 0,
    houseCost: 0,
    downPayment: 0,
    termOfLoan: 0,
    annualInterestRate: 0
  };
  handleChange = (e) => {
    this.setState({
      houseCost: e.target.houseCost,
      downPayment: e.target.downPayment,
      termOfLoan: e.target.termOfLoan,
      annualInterestRate: e.target.annualInterestRate 
    });
  };
  handleCostChange = () => {
    const principal = this.state.houseCost - this.state.downPayment
    const percentageRate = this.state.annualInterestRate / 1200
    const lengthOfLoan = 12 * this.state.termOfLoan
    this.setState(
      prevState => ({
        cost: (prevState.cost = (principal * percentageRate) / (1 - (Math.pow((1 + percentageRate) , lengthOfLoan * -1)))).toString()
      });
    );
  };
  render() {
    return (
      <div className="App">
        <Counter
          cost={this.state.cost}
          houseCost={this.state.houseCost}
          downPayment={this.state.downPayment}
          termOfLoan={this.state.termOfLoan}
          annualInterestRate={this.state.annualInterestRate}
          changeCost={this.handleCostChange}
          handleChange={this.handleChange}
        />
      </div>
    );
  }
}

export default App;

Counter.js文件

import React from 'react';


const Counter = (props) => {

        return (
            <div className="counter">
                <input 
                   type="number" 
                   placeholder="House Cost" 
                   onChange={(e) => props.handleChange(e)}>
                </input>
                <input 
                   type="number" 
                   placeholder="Down Payment" 
                   onChange={(e) => props.handleChange(e)}>
                </input>
                <input 
                   type="number" 
                   placeholder="Mortgage Period (years)" 
                   onChange={(e) => props.handleChange(e)}>
                </input>
                <input 
                   type="number" 
                   placeholder="Interest Rate" 
                   onChange={(e) => props.handleChange(e)}>
                </input>
                <button 
                   className="counter-action" 
                   onClick={props.changeCost}
                >Calculate
                </button>
                <span className="counter-score">{ props.cost }</span>
            </div>
            );
    }


export default Counter;

Answer 1

尝试一下

  handleCostChange = () => {
       const { houseCost, downPayment, annualInterestRate, termOfLoan } = this.state;
       const principal = houseCost - downPayment
       const percentageRate = annualInterestRate / 1200
       const lengthOfLoan = 12 * termOfLoan;
       const cost = (principal * percentageRate) / (1 - (Math.pow((1 + percentageRate) , lengthOfLoan * -1))).toString();
       this.setState({
           cost
       })
   }

还需要进一步的更改。创建单个事件处理程序并使用event.target.value

设置值

   handleCostChange = (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,
        });
   }

并传递所有事件处理程序

       <Counter
      cost={this.state.cost}
      houseCost={this.state.houseCost}
      downPayment={this.state.downPayment}
      termOfLoan={this.state.termOfLoan}
      annualInterestRate={this.state.annualInterestRate}
      handleCostChange={this.handleCostChange}
     handleTermOfLoan ={this.handleTermOfLoan}
     handleannualInterestRate={this.handleannualInterestRate}
     handleDownPayment={this.handleDownPayment}
    />

现在Counter.js中将值作为值的属性传递给输入元素以及各个事件处理程序函数

        <input type="number" placeholder="House Cost" onChange={(e) => props.handleCostChange(e)} value={props.houseCost}></input>
            <input type="number" placeholder="Down Payment" onChange={(e) => props.handleDownPayment(e)} value={props.downPayment}></input>
            <input type="number" placeholder="Mortgage Period (years)" onChange={(e) => props.handleTermOfLoan(e)} value={props.termOfLoan}></input>
            <input type="number" placeholder="Interest Rate" onChange={(e) => props.handleannualInterestRate(e)} value={annualInterestRate}></input>

请原谅我输入错误，因为我正在用手机接听

React函数抵押计算器返回NAN

1 个答案: