在 React.js 中如何将表单的值从一个组件传递到另一个组件

Question

In my EMI calculator application using react.js , i have form in one component called Home.js when user enter the form values and click calculate emi,

I like to pass the form values to another component called PromptContainers where it will be evaluated and EMI will be calculated and displayed.

for easy reading full source code is in https://github.com/sudanvellakovilkanakavel/multicomponent-EMIapp

my 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;

My PromptContainer.js code is as follows

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;

Answer 1

Just go through React docs

For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in componentDidMount(), unsubscribe in componentWillUnmount(), and call setState() when you receive an event. Flux pattern is one of the possible ways to arrange this.

Suorce: https://facebook.github.io/react/tips/communicate-between-components.html

For help around setting up event system you can check https://gist.github.com/minwe/14a62f0eb5e865fef078

Or simply check Flux as it naturally goes with React