javascript - react getInitialState 不工作

Question

我是 React 的新手，我正在尝试制作抵押计算器，同时学习框架的基础知识。我的问题是，如何解决当我更改任何输入字段时，getInitialState 设置的 rate 到 2 的问题与其他所有内容一起消失，React 不再知道 rate 的状态。提前致谢!

 
var MortgageCalc = React.createClass({
  mortgageCalc: function() {
    //findDOMNode to pull entered values into function   
    var principal = React.findDOMNode(this.refs.principal).value,
        rate = React.findDOMNode(this.refs.rate).value * 0.01,
        term = React.findDOMNode(this.refs.term).value * 12;
    var monthlyRate = rate/12;
    var factor = Math.pow(monthlyRate + 1, term);
    var numerator = monthlyRate * factor;
    var denominator = factor - 1;
    var quotient =  numerator/denominator;
    var payment = principal * quotient;
    console.log('$' + payment.toFixed(2));
    return payment.toFixed(2);
  },
  getInitialState: function() {
		
    return {value:{rate: 2}, payment: '0.00'}
  },
  handleChange: function(event) {
    this.setState({value: event.target.value, payment: this.mortgageCalc()});
  },
  render: function() {
    return (
      <div className="form-group">
        <h2>Mortgage Calculator</h2>
        <form className="form-group">
          <input type="number" ref="principal" placeholder="Loan Amount" value={this.state.value.principal} onChange={this.handleChange}/><br/>
          <input type="number" ref="rate" placeholder="Interest Rate" value={this.state.value.rate} onChange={this.handleChange}/><br/>
          <input type="number" ref="term" placeholder="Length of loan" value={this.state.value.term} onChange={this.handleChange}/><br/>
          <h3>Your estimated monthly payment is ${this.state.payment}</h3>
        </form>        
      </div>
    )
  }
});

ReactDOM.render(<MortgageCalc/>, document.getElementById('form'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div class="container-fluid" id="form"></div>

Answer 1

这是因为您在 handleChange 方法中将 value 保存为数字而不是对象:

handleChange: function(event) {
    this.setState({value: event.target.value, payment: this.mortgageCalc()});
}

应该是:

handleChange: function(event) {
    this.setState({
        value: { rate: event.target.value }, 
        payment: this.mortgageCalc()
    });
}

var MortgageCalc = React.createClass({
  mortgageCalc: function() {
    // PUll values from state 
    var principal = this.state.value.principal,
        rate = this.state.value.rate * 0.01,
        term = this.state.value.term * 12;
    var monthlyRate = rate/12;
    var factor = Math.pow(monthlyRate + 1, term);
    var numerator = monthlyRate * factor;
    var denominator = factor - 1;
    var quotient =  numerator/denominator;
    var payment = principal * quotient;
    return payment.toFixed(2);
  },
  getInitialState: function() {
    return {
      value:{
        rate: 2,
        principal: 30000,
        term: 2
      }, 
      payment: '0.00'
    }
  },
  componentDidMount() {
    this.setState({ payment: this.mortgageCalc() })
  },
  handleChange: function(event) {
    this.setState({
      value: { 
        ...this.state.value,
        [event.target.name]: event.target.value 
      }, 
      payment: this.mortgageCalc()
    });
  },
  render: function() {
    return (
      <div className="form-group">
        <h2>Mortgage Calculator</h2>
        <form className="form-group">
          <input type="number" name="principal" placeholder="Loan Amount" value={this.state.value.principal} onChange={this.handleChange}/><br/>
          <input type="number" name="rate" placeholder="Interest Rate" value={this.state.value.rate} onChange={this.handleChange}/><br/>
          <input type="number" name="term" placeholder="Length of loan" value={this.state.value.term} onChange={this.handleChange}/><br/>
          <h3>Your estimated monthly payment is ${this.state.payment}</h3>
        </form>        
      </div>
    )
  }
});

ReactDOM.render(<MortgageCalc/>, document.getElementById('form'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div class="container-fluid" id="form"></div>