Reactjs passando metodi come oggetti di scena a figlio

Question

C'è un modo per passare metodi della classe corrente per classe bambino come oggetti di scena

A titolo di esempio;

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

voglio passare questo metodo setWizardState di SignupModal a figlio SignupSetup come prop, ma ottengo l'errore

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

Answer 1

I problemi sono qui:

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

Il primo è un refuso (onClick, maiuscola C). Ma il problema principale è che stai chiamando setWizardState e onClick accetta una funzione. Devi applicarlo parzialmente.

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

Answer 2

È anche possibile utilizzare la notazione ES6 freccia se si dispone di un compilatore come Babel

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

Answer 3

Ecco a link sul sito ufficiale reactjs. Apparente è necessario associare questa funzione invece di applicare direttamente.

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