Reactjs Methoden als Requisiten Kind vorbei

Question

Gibt es eine Möglichkeit Methoden der aktuellen Klasse zu Klasse Kind als Requisiten Als Beispiel

zu passieren;

var SignupModal = React.createClass({ 
mixins: [CheckMixin], 
getInitialState: function(){ 
    return { 
     'wizardstate': 0 
    } 
}, 
setWizardState: function(state){ 
    var that = this; 
    switch (state){ 
     case 0: 
      that.setState({'wizardstate': 0}); 
      break; 
     case 1: 
      that.setState({'wizardstate': 1}); 
      break; 
     case 2: 
      that.setState({'wizardstate': 2}); 
      break; 
     case 3: 
      that.setState({'wizardstate': 3}); 
      break; 
     case 4: 
      that.setState({'wizardstate': 4}); 
      break; 
    } 
}, 
render: function(){ 
    var temp; 
    switch (this.state.wizardstate){ 
     case 0: 
      temp = (<SignupSetup setWizardState={this.setWizardState}/>); 
      break; 
     case 1: 
      temp = (<EmailSetup />); 
      break; 
     case 2: 
      temp = (<PasswordSetup />); 
      break; 
     case 3: 
      temp = (<UsernameSetup />); 
      break; 
     case 4: 
      temp = (<CategoriesSetup />); 
      break; 
    } 
    return (<Modal {...this.props} title="Login" animation={false}> 
      <div className="modal-body"> 
       <div> 
       {temp} 
       </div> 
      </div> 
     </Modal>) 


var SignupSetup = React.createClass({ 
    render: function(){ 
     return (<Button onClick={this.props.setWizardState(1)}></Button>) 
    } 
}); 

Ich möchte diese setWizardState Methode von SignupModal zu Kind SignupSetup als Stütze passieren, aber ich habe den Fehler

Uncaught Error: Invariant Violation: replaceState(...): Cannot update during an existing state transition (such as within). Render methods should be a pure function of props and state.react.js:17122

Answer 1

Die Probleme machen sind hier:

<Button onclick={this.props.setWizardState(1)}></Button> 

Zuerst ist ein Tippfehler (onClick, Großbuchstabe C). Aber das Hauptproblem ist, dass Sie setWizardState aufrufen und onClick eine Funktion übernimmt. Sie müssen es teilweise anwenden.

onClick={this.props.setWizardState.bind(null, 1)} 

Answer 2

Sie können auch es6 Pfeil-Notation verwenden, wenn Sie einen Compiler wie Babel

<Button onclick={() => this.props.setWizardState(1)}></Button>

Answer 3

Hier haben ist a link bei offiziellen reactjs Website. Anscheinend müssen Sie diese Funktion binden, anstatt sie direkt anzuwenden.

onClick={this.setWizardState.bind(this, 1)}