Javascript 反应getInitialState不工作

我是个新手，在学习框架的基础知识的同时，我正在尝试制作一个抵押贷款计算器。我的问题是，如何解决这样一个问题：当我更改任何输入字段时，由

getInitialState

设置为

2

的

rate

将与所有其他字段一起消失，并且不再知道

rate

的状态。非常感谢

var MortgageCalc=React.createClass({
mortgageCalc:函数（）{
//findDOMNode将输入的值拉入函数
var principal=React.findDOMNode（this.refs.principal）.value，
速率=React.findDOMNode（此.refs.rate）。值*0.01，
term=React.findDOMNode（this.refs.term）.value*12；
月利率风险值=利率/12；
var系数=数学功率（月利率+1，期限）；
var分子=月利率*因子；
var分母=因子-1；
var商=分子/分母；
var支付=本金*商；
console.log（“$”+payment.toFixed（2））；
返回付款。toFixed（2）；
},
getInitialState:函数（）{
返回{value:{rate:2}，付款：'0.00'}
},
handleChange:函数（事件）{
this.setState（{value:event.target.value，payment:this.mortgageCalc（）}）；
},
render:function（）{
返回(
按揭计算器






您估计每月付款为${this.state.payment}
)
}
});
ReactDOM.render（，document.getElementById（'form'））
这是因为在
handleChange
方法中，您将
值保存为数字而不是对象：

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:函数（）{
//从状态中提取值
var principal=this.state.value.principal，
rate=this.state.value.rate*0.01，
term=this.state.value.term*12；
月利率风险值=利率/12；
var系数=数学功率（月利率+1，期限）；
var分子=月利率*因子；
var分母=因子-1；
var商=分子/分母；
var支付=本金*商；
返回付款。toFixed（2）；
},
getInitialState:函数（）{
返回{
价值：{
比率：2，
委托人：30000，
任期：2
}, 
付款：“0.00”
}
},
componentDidMount（）{
this.setState（{payment:this.mortgageCalc（）}）
},
handleChange:函数（事件）{
这是我的国家({
值：{
…这个.state.value，
[event.target.name]：event.target.value
}, 
付款方式：this.mortgageCalc（）
});
},
render:function（）{
返回(
按揭计算器






您估计每月付款为${this.state.payment}
)
}
});
ReactDOM.render（，document.getElementById（'form'））

React.createClass
是一个非常旧的版本，不再受支持，不确定您使用的是什么教程，但它非常过时。您应该通过中的教程学习最新版本。感谢您的回复。这对速率有效，但它使handleChange只对速率有效rate@BrianRl您的
mortgageCalc
功能需要一些工作。如果您输入贷款金额和年数，您将看到返回的值是正确的。看起来您的代码需要先有长度，然后是贷款金额才能工作。您提供的handleChange函数仅适用于利率，对吗？关于你提到的增加金额和年份，这正是我的问题。如果我使用getInitialState设置所有输入，只要你改变其中一个数字，输入中的所有值都消失了好吧，你在问题中没有很好地解释这一点。我现在明白了，并修正了我的例子。请重新运行代码，它应该可以正常工作。我对输入进行了更改，
mortgageCalc
函数，
getInitialState
并且我必须添加一个
componentDidMount
。需要做很多工作才能让它像你想要的那样工作。