반응 상태 속성을 읽을 수 없습니다.

Question

다단계 페이지 설정을위한 구성 요소가 있습니다. 그것은 내가 props 함수를 호출하고 구성 요소의

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}/> 
     } 
    } 
} 

하나의 상태를 저장합니다.

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

나는 페이지를 방문

, 페이지가 (즉이 <CreateArticleWysiwyg />)의 하위 구성 요소로 표시됩니다. 하지만 확인을 누르면 (발사되는 saveAndContinue()), 나는이 오류가 무엇입니까 :

Uncaught TypeError: Cannot read property 'step' of undefined

내가 잘못하고있는 중이 야 무엇을? 귀하의 도움은 대단히 감사하겠습니다. 고맙습니다.

Answer 1

constructor 메서드가 CreateArticle이면 this.nextStep=this.nextStep.bind(this)을 추가하여 click 이벤트가 아닌 구성 요소에 함수의 컨텍스트를 바인딩해야합니다.