React函数抵押计算器返回NAN

Question

The function handleCostChange is supposed to calculate the mortgage payment based on the inputs. It currently returns NAN- I first wrote it in JavaScript and it worked well. I'm trying to figure out what went wrong when I tried to refactor this function from Javascript and add it to my React component.

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 file

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

Try this

  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
       })
   }

Also you need further changes. Create individual event handlers and set the value using 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,
        });
   }

And pass down all event handlers

       <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}
    />

Now in Counter.js pass values as value prop to input elements along with individual event handler functions

        <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>

Please excuse me for typo errors because I am answering on my mobile