-1
In meiner EMI-Rechner-Anwendung mit react.js habe ich Formular in einer Komponente namens Home.js, wenn Benutzer die Formularwerte eingeben und klicken Sie auf emi berechnen,In React.js Wie übergeben Sie Werte des Formulars von einer Komponente zu einer anderen Komponente
Ich übergebe gerne die Formularwerte an eine andere Komponente namens PromptContainers, wo es ausgewertet wird und EMI berechnet und angezeigt wird.
zum einfachen Lesen vollständigen Quellcode ist in https://github.com/sudanvellakovilkanakavel/multicomponent-EMIapp
mein 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;
Mein PromptContainer.js Code ist wie folgt
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. ein minimales Beispiel mit einigen Code Geben , Bitte. 2. Ohne viel nachzudenken würde ich sagen, dass die "Reagieren" -Methode darin besteht, einen Rückruf für die Elternkomponente (von beiden Komponenten) auszulösen - was den Status für die Elternkomponente ändert. Dieser Callback setzt eine neue Requisite für PromptContainers, die dann automatisch neu rendert. – wnstnsmth
Haben Sie jemals ein React Tutorial abgeschlossen? Ich denke, dass dies nur eine grundlegende Transformation einer TODO-App ist. –
Hallo wnstnsmthth vielen Dank für deine schnelle Wiederholung. Ich habe meinen Code hinzugefügt. Ich bin neu, um freundlich zu helfen. –