Kann die Eigenschaft des reagierenden Status nicht lesen

Question

Ich habe eine Komponente für mehrstufige Seiteneinrichtung. Es speichert den Zustand der

export default class CreateArticle extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      step: 1 
     }; 
    } 
    saveValues(fields) { 
     fieldValues = Object.assign({}, fieldValues, fields); 
    } 
    nextStep() { 
     this.setState({ 
      step : this.state.step +1 
     }) 
    } 
    prevStep() { 
     this.setState({ 
      step: this.state.step -1 
     }) 
    } 
    render() { 

     switch (this.state.step) { 
      case 1: 
       return <CreateArticleWysiwyg nextStep={this.nextStep} saveValues={this.saveValues}/> 
      case 2: 
       return <CreateArticlePublish nextStep={this.nextStep} saveValues={this.saveValues}/> 
     } 
    } 
} 

Einer der Komponente, wo ich die props Funktionen nenne.

export default class CreateArticleWysiwyg extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      is_header: false, 
      is_quote: false 
     }; 
    } 
    saveAndContinue =() => { 
     var data = { 
      article_body: this.refs.article_body.value 
     } 
     this.props.saveValues(data); 
     this.props.nextStep(); 
    } 
    render() { 
     return(
      <div> 
       <header id="create-article-wysiwyg-header"> 
        <button id="cancel">Cancel</button> 
        <button id="confirm" onClick={this.saveAndContinue}>Ok</button> 
        <span class="clear_both"></span> 
       </header> 
      </div> 
     ); 
    } 
} 

Wenn ich die Seite besuchen, wird die Seite mit seiner untergeordneten Komponente angezeigt (das heißt <CreateArticleWysiwyg />). Aber wenn ich ok drücken (die die saveAndContinue() ausgelöst wird), erhalte ich diese Fehlermeldung:

Uncaught TypeError: Cannot read property 'step' of undefined

Was mache ich falsch? Ihre Hilfe wird sehr geschätzt. Vielen Dank.

Answer 1

In der constructor Methode von CreateArticle sollten Sie this.nextStep=this.nextStep.bind(this) hinzufügen, um den Kontext der Funktion an die Komponente statt an das Klickereignis zu binden.