임 내가 MaterialUI 사용하고

Question

을 "정의되지 않은 재산 stepIndex을 읽을 수 없습니다"MaterialUI 스테퍼와 함께 몇 가지 이상한 오류를 받고 난 오류가 받고 있어요 - 내 크롬 콘솔에서

"Uncaught TypeError: Cannot read property 'stepIndex' of undefined" 을

내가하지 않은 다른 Material-UI React 구성 요소 중 하나에서이 오류가 발생했습니다. 나는 이것에 어리석은 실수 인 경우에 나를 참아주십시오. 나는이 문제를 해결할 수 없다.

저는 5.3.1을 사용하고 있습니다.

내 코드 :

class HorizontalLinearStepper extends React.Component { 
    handleNext() { 
    const {stepIndex} = this.state; 
    this.setState({stepIndex: stepIndex + 1,finished: stepIndex >= 2}); 
    }; 
    handlePrev() { 
    const {stepIndex} = this.state; 
    if (stepIndex > 0) { 
     this.setState({ 
     stepIndex: stepIndex - 1 
     }); 
    } 
    }; 

    getStepContent(stepIndex) { 
    switch (stepIndex) { 
     case 0: 
     return 'Select campaign settings...'; 
     case 1: 
     return 'What is an ad group anyways?'; 
     default: 
     return 'You\'re a long way from home sonny jim!'; 
    } 
    } 
    render() { 
    const {finished, stepIndex} = this.state; 
    return (
     <div> 
     <Stepper activeStep={stepIndex}> 
      <Step> 
      <StepLabel>Select campaign settings</StepLabel> 
      </Step> 
      <Step> 
      <StepLabel>Create an ad group</StepLabel> 
      </Step> 
     </Stepper> 
     <div style={contentStyle}> 
      {finished ? (
      <p> 
       <a 
       href="#" 
       onClick={(event) => { 
        event.preventDefault(); 
        this.setState({stepIndex: 0, finished: false}); 
       }} 
       > 
       Click here 
       </a> to reset the example. 
      </p> 
     ) : (
      <div> 
       <p>{this.getStepContent(stepIndex)}</p> 
       <div style={{marginTop: 12}}> 
       <FlatButton 
        label="Back" 
        disabled={stepIndex === 0} 
        onTouchTap={this.handlePrev} 
        style={{marginRight: 12}} 
       /> 
       <RaisedButton 
        label={stepIndex === 2 ? 'Finish' : 'Next'} 
        primary={true} 
        onTouchTap={this.handleNext} 
       /> 
       </div> 
      </div> 
     )} 
     </div> 
     </div> 
    ); 
    } 
} 
export default HorizontalLinearStepper; 

감사합니다!

Answer 1

<FlatButton 
    label="Back" 
    disabled={stepIndex === 0} 
    onTouchTap={this.handlePrev.bind(this)} 
    style={{marginRight: 12}} 
/> 
<RaisedButton 
    label={stepIndex === 2 ? 'Finish' : 'Next'} 
    primary={true} 
    onTouchTap={this.handleNext.bind(this)} 
/> 

당신은 다른 컨텍스트에서 실행되고 this의 올바른 의미를 잃어 버리게로 핸들러를 바인드해야, 그래서 우리는 this의 오른쪽 컨텍스트를 유지하기 위해 핸들러를 바인딩합니다.