-1
react.jsを使用したEMI計算アプリケーションでは、ユーザーがフォーム値を入力してemiを計算すると、Home.jsというフォームにフォームがあります。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;
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.反応するFluxをチェックし、いくつかのコードを最小限の例を提供します、 お願いします。 2.これを行う「反応」の方法は、（両方のコンポーネントの）親コンポーネントのコールバックを起動することです。これにより、親コンポーネントの状態が変更されます。このコールバックは、PromptContainersの新しい小道具を設定し、自動的に再レンダリングします。 – wnstnsmth
反応チュートリアルを完了したことがありますか？これはTODOアプリの基本的な変換だと思います。 –
こんにちは、私はあなたの迅速なリプレイのために大変ありがとうございます。私のコードを追加しました。私は親切に反応するために新しいです。 –