-1
在我的EMI计算器应用程序中使用react.js时，我有一个名为Home.js的组件，当用户输入表单值并单击计算emi时，In React.js如何将表单的值从一个组件传递到另一个组件
我喜欢将表单值传递给另一个名为PromptContainers的组件，在该组件中它将被评估并计算并显示EMI。
，为方便阅读完整的源代码是在https://github.com/sudanvellakovilkanakavel/multicomponent-EMIapp
我Home.js
var React = require('react');
var ReactRouter = require('react-router');
var Link = ReactRouter.Link;
var divStyle = {
background: "#D9EDF7"
};
var Home = React.createClass({
render: function()
{
return(
<div className= "jumbotron col-sm-6 col-sm-offset-3 text-center" style={divStyle} >
<form name="myForm" onSubmit= {'../containers/PromptContainer.js'} method="post">
<div class="form-group">
<label>Choose a bank :</label>
<div class="col-sm-6">
<select>
<option value="">Canadian Imperial Bank of Commerce</option>
<option value="">Bank of Montreal</option>
<option value="">Laurentian Bank of Canada</option>
<option value="">National Bank of Canada</option>
</select>
</div>
</div>
<br />
<div class="form-group">
<label>Choose a Gender :</label>
<div class="col-sm-6">
<select>
<option value="">Male</option>
<option value="">Female</option>
<option value="">Other</option>
</select>
</div>
</div>
<br />
<div class="form-group">
<label>Choose a loan type :</label>
<div class="col-sm-6">
<select>
<option value="">Personal</option>
<option value="">Housiing</option>
<option value="">Vechile</option>
<option value="">Business</option>
</select>
</div>
</div>
<br />
<div class="form-group">
<label>Enter the current age :</label>
<div class="col-sm-6">
<input type="number" class="form-control" name="age" placeholder="eg. 25" />
</div>
</div>
<br />
<div class="form-group">
<label>Enter monthly income in $:</label>
<div class="col-sm-6">
<input type="number" class="form-control" name="income" placeholder="eg. 30000" />
</div>
</div>
<br />
<div class="form-group">
<label>Enter loan amount in $:</label>
<div class="col-sm-6">
<input type="number" class="form-control" name="loan" placeholder="eg. 1000000" />
</div>
</div>
<br />
<div class="form-group">
<label>Enter interest rate in % : </label>
<div class="col-sm-6">
<input type="text" class="form-control" name="rate" placeholder="eg. 10.5" />
</div>
</div>
<br />
<div class="form-group">
<label>Enter duration in months : </label>
<div class="col-sm-6">
<input type="number" class="form-control" name="months" placeholder="eg. 48" />
</div>
</div>
<br />
<br />
<br />
<div className="form-group col-sm-4 col-sm-offset-4">
<Link to='../containers/PromptContainer.js'>
<button className="btn btn-block btn-success"type="submit">CALCULATE</button>
</Link>
</div>
<br />
<br />
<br />
</form>
</div>
)
}
});
module.exports = Home;
我PromptContainer.js代码如下
var React = require('react');
var ReactDOM = require('react-dom');
var PromptContainer = React.createClass({
render: function() {
return (
<div className= "jumbotron col-sm-6 col-sm-offset-3 text-center">
calInterestandvalidation: function() {
if(document.myForm.age.value == "")
{
alert("Please provide your age!");
document.myForm.age.focus() ;
return false;
}
if(document.myForm.income.value == "")
{
alert("Please provide your income!");
document.myForm.income.focus() ;
return false;
}
if(document.myForm.loan.value == "")
{
alert("Please provide your loan!");
document.myForm.loan.focus() ;
return false;
}
if(document.myForm.rate.value == "")
{
alert("Please provide your rate!");
document.myForm.rate.focus() ;
return false;
}
if(document.myForm.months.value == "")
{
alert("Please provide your months!");
document.myForm.months.focus() ;
return false;
}
if(
document.myForm.age.value != "" &&
document.myForm.income.value != "" &&
document.myForm.loan.value != "" &&
document.myForm.rate.value != "" &&
document.myForm.months.value != ""
)
{
var loanterm = document.myForm.months.value;
var roicomb; //rate of interest calculated on monthly basis
var emi;
var principle = document.myForm.loan.value;
var rannualinterest = document.myForm.rate.value ;
roicomb = rannualinterest/12/100;
emi=principle*roicomb *(1+roicomb)^loanterm/((1+roicomb)^loanterm-1);
alert(emi);
return true;
}
return(true);
},
)
}
});
</div>
module.exports = PromptContainer;
Main.js
var React = require('react');
var ReactRouter = require('react-router');
var divStyle = {
background: "#F5F5DC"
};
var Main = React.createClass({
render: function() {
return (
<div className= "jumbotron col-sm-6 col-sm-offset-3 text-center" style={divStyle} >
<h2><font color="orange">CHOOSE YOUR LOAN WISELY </font></h2>
<h4>An React App For Calculating Your Monthly Loan Interest in Different Canadian Banks</h4>
<br /> <br />
{this.props.children}
</div>
)
}
});
module.exports = Main;
个route.js
var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;
var hasHistory = ReactRouter.hasHistory;
var Main = require ('../components/Main');
var Home = require ('../components/Home');
var PromptContainer = require ('../containers/PromptContainer');
var routes = (
<Router history={hasHistory}>
<Route path='/' component= {Main} >
<IndexRoute component={Home} />
<Route path='result' component={PromptContainer} />
</Route>
</Router>
);
module.exports = routes;
1.提供一些代码小例子去， 请。 2.没有太多的思考，我会说这样做的“反应”方式是在父组件（两个组件）上触发一个回调 - 这会改变父组件的状态。这个回调为PromptContainers设置了一个新的道具，然后自动重新渲染。 – wnstnsmth
你有没有完成任何反应教程？我认为这只是TODO应用程序的基本转型。 –
您好，非常感谢您的快速回复。我添加了我的代码。我是新来的，善待帮助。 –