Javascript 如何将inputbox输入的值作为父类中的组件获取

我已经创建了InputField和button作为单独的组件，并在两个js文件incomeFields和Emifields中使用。然后将两个Js文件作为一个名为HomeLoanEmiCalculator的邮件文件中的组件。然后根据提供的输入计算另一个文件成功文件。单击“下一步”按钮，值将保存在一个对象中，我们可以在成功文件中检索输入的值以计算EMI值。我指的是下面的网站 因为我们必须在ReactJS中创建。下面的代码工作不正常。即使使用ref，我也无法访问字段值

var React = require('react');
var InputField = React.createClass({
  getInitialState: function(){
      return{
        value: this.props.value || '',
    };
  },
  setValue: function (event) {
    this.setState({
      value: event.currentTarget.value
    });
    setDefaultValue =   this.props.fieldValues+"."+this.props.stateId;
  },
  render: function() {
    return (<div>
                    <div>
                    <input className="inputText" id={this.props.stateId} type="text" 
                    ref={this.props.stateId} onChange={this.props.setValue} defaultValue={this.props.setDefaultValue}/>
                            </div>);
  }

});
module.exports = InputField;

var React = require('react')
var InputField = require('./InputField')
var IncomeFields = React.createClass({
nextStep: function(e) {     
e.preventDefault();     
var data = {            
monthlyIncome : this.refs.monthlyIncome.getDOMNode().value,         
rentalIncome  : this.refs.rentalIncome.getDOMNode().value,          
otherIncome   : this.refs.otherIncome.getDOMNode().value        
}       
this.props.saveValues(data);
        this.props.nextStep();

},
render: function() {   

return (<div>
            <h2>Please enter your income details</h2>
                                    <ul className="inputList">
                                        <li className="width25 hlec">
                                            <InputField name="Gross Monthly Income"
                                                stateId="monthlyIncome"
                                                metrics= "INR"
                                                required="true"
                                                setDefaultValue={this.props.fieldValues.monthlyIncome}
                                                imgPath="images/icons/icon_rupee.png"/>
                                        </li>
                                        <li className="width25 hlec">
                                            <InputField name="Rental Income"
                                                stateId="rentalIncome"
                                                metrics= "INR"
                                                setDefaultValue={this.props.fieldValues.rentalIncome}
                                                imgPath="images/icons/icon_house.png"/>
                                        </li>
                                        <li className="width25 hlec last">
                                            <InputField name="Other Income"
                                                stateId="otherIncome"
                                                metrics= "INR"
                                                setDefaultValue={this.props.fieldValues.otherIncome}
                                                imgPath="images/icons/icon_cashBundle.png"/>
                                        </li>
                                    </ul>
        </div>

    )
  }
})

module.exports = IncomeFields

var React = require('react')
var InputField = require('./InputField')
var EmiFields = React.createClass({

    nextStep: function(e) {
        e.preventDefault();
        var data = {
            mortageLoan : this.refs.mortageLoan.getDOMNode().value,
            persoanlLoan  : this.refs.persoanlLoan.getDOMNode().value,
            creditLoan   : this.refs.creditLoan.getDOMNode().value,
            autoLoan : this.refs.autoLoan.getDOMNode().value,
            outstandingCCAmount : this.refs.outstandingCCAmount.getDOMNode().value,
            interestRate : this.refs.interestRate.getDOMNode().value
        }
        this.props.saveValues(data);
        this.props.nextStep();
},
render: function() {   

return (<div>
            <h2>Please enter your income details</h2>
                                    <ul className="inputList">
                                        <li className="width25 hlec">
                                            <InputField name="Any other Mortgage Loan"
                                                stateId="mortageLoan"
                                                metrics= "INR"
                                                imgPath="images/icons/icon_house.png"/>
                                </li>
                                <li className="width25 hlec">
                                            <InputField name="Personal Loan"
                                                stateId="personalLoan"
                                                metrics= "INR"
                                                imgPath="images/icons/icon_user.png"/>
                                </li>
                                <li className="width25 hlec">
                                            <InputField name="Loan on Credit Card"
                                                stateId="creditLoan"
                                                metrics= "INR"
                                                imgPath="images/icons/icon_card.png"/>
                                </li>
                                <li className="width25 hlec last">
                                            <InputField name="Auto Loan"
                                                stateId="autoLoan"
                                                metrics= "INR"
                                                imgPath="images/icons/icon_car.png"/>
                                </li>
                            </ul>
                            <ul className="inputList part2">
                                <li className="width25 hlec">
                                            <InputField name="Outstanding Amount on Credit Card"
                                                stateId="outstandingCCAmount"
                                                metrics= "INR"
                                                imgPath="images/icons/icon_rupee.png"/>
                                </li>
                                <li className="width25 hlec last">
                                            <InputField name="Auto Loan"
                                                stateId="otherLoan"
                                                metrics= "INR"
                                                imgPath="images/icons/icon_rupee.png"/>
                                </li>
                            </ul>
        </div>

    )
  }
})

module.exports = EmiFields

var React = require('react');

var EmiCalculations = require('./store/EmiCalculator');

var aboutLoanStyle = {
    width: '235px', 
    marginRight: '10px'
};

var loanAvail = null;
var homeValue = null;
var monthlyEMI = null;

var Success = React.createClass({

  render: function() {
    return (
                <div> {this.calculate}
                    <div className="section1 outputSection">
                            <ul className="outputRack">
                                <li className="c2">
                                    <div className="outputLabel">
                                        <strong>Maximum Home Loan available to you</strong>
                                    </div>
                                    <div className="outputValue last" id="loanAvail" ref="loanAvail" defaultValue={this.props.fieldValues.loanAvail}>{EmiCalculations.getLoanAvail(this.props.fieldValues)}</div>
                                </li>
                                <li className="c2 last">
                                    <div className="outputLabel">
                                        <strong>Value of Home you can purchase</strong>
                                    </div>
                                    <div className="outputValue last" id="homevalue" ref="homeValue" defaultValue={this.props.fieldValues.homeValue}>{EmiCalculations.getHomeValue(this.props.fieldValues)}</div>
                                </li>
                            </ul>
                            <ul className="outputRack rack2">
                                <li className="c2">
                                    <div className="outputLabel">
                                        <strong>Your Monthly EMI</strong>
                                    </div>
                                    <div className="outputValue last" id="monthlyEMI" ref="monthlyEMI" defaultValue={this.props.fieldValues.monthlyEMI}>{EmiCalculations.getMonthlyEMI(this.props.fieldValues)}</div>
                                </li>
                            </ul>
                        </div>
                        </div>

    )
  }
})

module.exports = Success

var React = require('react')
var IncomeFields = require('./IncomeFields')
var aboutLoanStyle = {
    width: '235px',
    marginRight: '10px'
};

var Navigation = React.createClass({
   getInitialState: function() {
        return {
                  nextCount: 1
        }
    },
    nextStep: function(e) {

        e.preventDefault();
         var cnt = ++this.state.nextCount
     this.props.nextStep(cnt);
     this.setState({nextCount: cnt});
     console.log(IncomeFields.props.fieldValues);
    },
    render: function() {
    return (<div className="inputButtonSection">
            <div className="right step1">
                <button className="blueBtn" style={aboutLoanStyle}>KNOW MORE ABOUT HOME LOANS</button>
                {this.props.nextBtnVisibility ? <button key={this.state.showEmiField} className="blueBtn nextBtn" style={this.props.btnStyle} onClick={this.nextStep}>{this.props.nextStepLabel}</button> : null}
                {this.props.resetBtnVisibility ? <button className="greyBtn reset first" onClick={this.resetValues}>RESET</button> : null }
            </div>
              </div>
    )
  }
})

module.exports = Navigation
var React         = require('react')
var IncomeFields = require('./IncomeFields')
var EmiFields  = require('./EmiFields')
var Success       = require('./Success')
var assign        = require('object-assign')
var Navigation = require('./Navigation')

var fieldValues = {
    principalAmount : 100000,
    monthlyIncome: null,
  rentalIncome : null,
  otherIncome  : null,
    mortageLoan : null,
    persoanlLoan : null,
    creditLoan : null,
    autoLoan : null,
    outstandingCCAmount : null,
    otherLoan : null,
    downPayment : null,
    loanTenure : null,
    loanAvail: null,
    homeValue: null,
    monthlyEMI: null
};

var HomeLoanEMICalculator = React.createClass({
    getInitialState: function() {
     return {
                 nextStepCount: 1,
                 nextStepLabel: "NEXT",
                 showEmiField: false,
                 showTenureFields: false,
                 showOutput: false,
                 nextBtnVisibility: true,
                 resetBtnVisibility: false,
                 btnStyle : {
                   marginRight: '10px'
                 }
     }
 },
  saveValues: function(field_value) {
    return function() {
      fieldValues = assign({}, fieldValues, field_value)
    }.bind(this)()
  },
    nextStep: function(count) {
    //this.setState({nextStepCount: count});
        this.showNext(count, true);
  },
    showNext: function(c, bool) {
            if(c===2) {
                this.setState({resetBtnVisibility : bool});
                this.setState({showEmiField: bool});
            } else if(c===3) {
                this.setState({showTenureFields: bool});
                this.setState({nextStepLabel: "CALCULATE"});
                btnStyles = {
                    width: '110px',
                    marginRight: '10px'
                }
                this.setState({btnStyle: btnStyles});
            } else if(c===4) {
                this.setState({showOutput: bool});
                this.setState({nextBtnVisibility: false});
            }
    },
  render: function() {
    return (
      <div className="calculatorWrapper">
                    <IncomeFields fieldValues={fieldValues}
                                                    nextStep={Navigation.nextStep}
                                                    saveValues={this.saveValues}/>
                    {this.state.showEmiField ? <EmiFields fieldValues={fieldValues}
                                                    nextStep={Navigation.nextStep}
                                                    saveValues={this.saveValues}/>: null}
                {this.state.showOutput ? <Success fieldValues={fieldValues}/> : null}
                    <Navigation nextBtnVisibility={this.state.nextBtnVisibility} resetBtnVisibility={this.state.resetBtnVisibility} btnStyle={this.state.btnStyle} nextStepLabel={this.state.nextStepLabel} nextStep={this.nextStep}/>
      </div>
    )
  }
})
module.exports = HomeLoanEMICalculator

var React        = require('react')
var ReactDOM        = require('react-dom')
var HomeLoanEMICalculator = require('./components/HomeLoanEMICalculator')

window.onload = function() {
  ReactDOM.render(
    <HomeLoanEMICalculator />,
    document.getElementById('emi-calc-form')
  )
}

var React=require（'React'）；
var InputField=React.createClass({
getInitialState:函数（）{
返回{
值：this.props.value | |“”，
};
},
设置值：函数（事件）{
这是我的国家({
值：event.currentTarget.value
});
setDefaultValue=this.props.fieldValues+“+”this.props.stateId；
},
render:function（）{
返回(
);
}
});
module.exports=输入字段；
var React=require（'React'）
var InputField=require（“./InputField”）
var IncomeFields=React.createClass({
下一步：函数（e）{
e、 预防默认值（）；
变量数据={
Monthlyncom:this.refs.Monthlyncom.getDOMNode（）值，
rentalIncome:this.refs.rentalIncome.getDOMNode（）.value，
otherIncome:this.refs.otherIncome.getDOMNode（）值
}       
this.props.saveValues（数据）；
this.props.nextStep（）；
},
render:function（）{
返回(
请输入您的收入明细








)
}
})
module.exports=IncomeFields
var React=require（'React'）
var InputField=require（“./InputField”）
var EmiFields=React.createClass({
下一步：功能（e）{
e、 预防默认值（）；
风险值数据={
mortageLoan:this.refs.mortageLoan.getDOMNode（）值，
persoanlLoan:this.refs.persoanlLoan.getDOMNode（）值，
creditLoan:this.refs.creditLoan.getDOMNode（）值，
autolon:this.refs.autolon.getDOMNode（）.value，
outstandingCCAmount:this.refs.outstandingCCAmount.getDOMNode（）.value，
interestRate:this.refs.interestRate.getDOMNode（）.value
}
this.props.saveValues（数据）；
this.props.nextStep（）；
},
render:function（）{
返回(
请输入您的收入明细
















)
}
})
module.exports=电磁场
var React=要求（'React'）；
变量计算=需要（'./存储/计算器'）；
var aboutLoanStyle={
宽度：“235px”，
marginRight:'10px'
};
var loanAvail=null；
var homeValue=null；
var monthlyEMI=null；
var Success=React.createClass({
render:function（）{
返回(
{this.calculate}


您可获得的最高住房贷款额
{chemicalculations.getLoanAvail（this.props.fieldValues）}


您可以购买的房屋价值
{chemicalculations.getHomeValue（this.props.fieldValues）}




您的每月EMI
{chemicalculations.getMonthlyEMI（this.props.fieldValues）}


)
}
})
module.exports=成功
var React=require（'React'）
var IncomeFields=require（“./IncomeFields”）
var aboutLoanStyle={
宽度：“235px”，
this.refs.monthlyIncome.getDOMNode().value

<input className="inputText" type="text" ref="monthlyIncome" />

 var InputField = React.createClass({
  getInitialState: function(){
    return {mortgageLoan: null, principalAmount: null};
  },
  renderFirstForm: function() {
        return (
          <div>Mortgage Loan: <input className="inputText" value={this.state.mortgageLoan} /></div>
        )
      },
      firstFormComplete: function() {
        return (this.state.mortgageLoan != null);
      }
      renderSecondForm: function() {
        return (
      <div>Principal Amount: <input className="inputText" value={this.state.principalAmount} onChange={} /></div>
    )
  }

})