Wie bekomme ich den Inputbox-Wert als Komponente in der Elternklasse? ReactJS

Question

Ich habe InputField und Button als separate Komponente erstellt und nutze sie in den beiden js-Dateien invenmentFields und Emifields. Dann die zwei Js-Datei als eine Komponente in Mail-Datei namens HomeLoanEmiCalculator aufgerufen. Dann eine andere Datei Erfolgsdatei zu berechnen, basierend auf der Eingabe zur Verfügung gestellt. Mit einem Klick auf Next Button wird der Wert in einem Objekt gespeichert und wir können den eingegebenen Wert innerhalb der Erfolgsdatei abrufen, um die EMI-Werte zu berechnen. Ich verweise die Seite unter https://www.online.citibank.co.in/products-services/loans/pop-up/home-loan-eligibility-calculator.htm wie wir in ReactJS erstellen müssen. Unten Code funktioniert nicht richtig. Selbst wenn ich ref benutze, kann ich nicht auf die fieldvalues ​​zugreifen

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') 
) 
} 

Bitte helfen Sie mir, dies zu tun. pls Dank im Voraus

Answer 1

Es gibt ein paar Probleme mit dem, was Sie zu tun versuchen:

Wenn Sie die Dokumentation auf Refs lesen: https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute

Sie werden sehen, dass Sie ein Attribut ref zuweisen müssen auf der Komponente, für die Sie den DOM-Wert erhalten möchten.

this.refs.monthlyIncome.getDOMNode().value 

funktioniert nur, wenn Sie so etwas wie:

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

Eine Möglichkeit dies zu begegnen, ist die Felder Eigenschaften in einem Zustand sein, haben, und je nachdem, ob diese Staaten festgelegt sind, auslösen Formular in seinen nächsten Zustand zu ziehen. Sie wahrscheinlich

Der Code kann etwas wie unten ähneln. Sie müssen noch Funktionen implementieren, damit onChange den Status aktualisiert. Sie können die Eingabe einfach durch InputField ersetzen, wenn das Eingabefeld den Wert über Requisiten übernimmt und die Funktion onChange wieder aufgerufen wird, um den Status zu ändern.