react jsxコンポーネントのコンパイルの問題

Question

以下のコードで9行目にエラーが表示されます
構文エラー：予期しないトークン（9:10）このコードの問題とその修正方法を教えていただけますか？

import React from 'react'; 
import {SelectField, MenuItem, getMuiTheme, MuiThemeProvider,Stepper,Step,StepLabel,StepButton,StepContent} from 'material-ui' 
    import injectTapEventPlugin from 'react-tap-event-plugin'; 
    import RaisedButton from 'material-ui/RaisedButton'; 
    import FlatButton from 'material-ui/FlatButton'; 

    class StepperComponent extends React.Component{ 

     state = { 
      stepIndex: 0, 
     } 

     handleNext =() => { 
      const {stepIndex} = this.state; 
      if (stepIndex < 2) { 
       this.setState({stepIndex: stepIndex + 1}); 
      } 
     }; 

     handlePrev =() => { 
      const {stepIndex} = this.state; 
      if (stepIndex > 0) { 
       this.setState({stepIndex: stepIndex - 1}); 
      } 
     }; 

     renderStepActions(step) { 
      return (
       <div style={{margin: '12px 0'}}> 
        <RaisedButton 
         label="Next" 
         disableTouchRipple={true} 
         disableFocusRipple={true} 
         primary={true} 
         onTouchTap={this.handleNext} 
         style={{marginRight: 12}} 
        /> 
        {step > 0 && (
         <FlatButton 
          label="Back" 
          disableTouchRipple={true} 
          disableFocusRipple={true} 
          onTouchTap={this.handlePrev} 
         /> 
        )} 
       </div> 
      ); 
     } 

     render() { 
      const {stepIndex} = this.state; 

      return (
       <div style={{maxWidth: 380, maxHeight: 400, margin: 'auto'}}> 
        <MuiThemeProvider muiTheme={getMuiTheme}> 
        <Stepper 
         activeStep={stepIndex} 
         linear={false} 
         orientation="vertical" 
        > 
         <Step> 
          <StepButton onClick={() => this.setState({stepIndex: 0})}> 
           GROUP NAME 
          </StepButton> 
          <StepContent> 
           <p> 
            Add group name and description selection component here 
           </p> 
           {this.renderStepActions(0)} 
          </StepContent> 
         </Step> 
         <Step> 
          <StepButton onClick={() => this.setState({stepIndex: 1})}> 
           STUDENT 
          </StepButton> 
          <StepContent> 
           <p> Add student component here </p> 
           {this.renderStepActions(1)} 
          </StepContent> 
         </Step> 
         <Step> 
          <StepButton onClick={() => this.setState({stepIndex: 2})}> 
           VERIFY 
          </StepButton> 
          <StepContent> 
           <p> 
            Add verify group component here 
           </p> 
           {this.renderStepActions(2)} 
          </StepContent> 
         </Step> 
        </Stepper> 
       </MuiThemeProvider> 
       </div> 
      ); 
     } 
    } 

    export default StepperComponent; 

以下の代替構文を使用すると、コンパイルエラーは発生しませんが、何らかの理由でボタンクリックイベントが機能しません。

constructor(props) { 
     super(props); 
     this.state = { 
      stepIndex: 0, 
     }; 
    } 


    handleNext() { 
     const {stepIndex} = this.state; 
     if (stepIndex < 2) { 
      this.setState({stepIndex: stepIndex + 1}); 
     } 
    }; 

    handlePrev() { 
     const {stepIndex} = this.state; 
     if (stepIndex > 0) { 
      this.setState({stepIndex: stepIndex - 1}); 
     } 
    }; 

Answer 1

あなたはクラスの内部

state = { 
      stepIndex: 0, 
     } 

を持つことができない、あなたは、最初のエラーがあるという事実によって引き起こされるコンストラクタ

constructor(props){ 
    super(props); 
    this.state = { 
      stepIndex: 0, 
     } 
} 

Answer 2

の内部の状態オブジェクトを配置する必要がありますあなたがコンストラクタで直接初期状態を設定したい場合は

状態を変更するそれ以外の場合はthis.setStateで行ってください。コードの第二構文の使用はhandleNext/handlePrevを壊す理由を対処するため

：

リアクトでES6クラスの構文を使用して、インラインイベントが自動的にコンポーネントにバインドされていないことを意味します。ボタン：this.setStateまたはthis.stateへ

任意の呼び出しはthisがハンドラは、私たちが呼ばのコンテキストを参照するので期待通りに動作しません。

は、初期状態を設定し、コンストラクタにバインドを使用する：

constructor(props){ 
    super(props); 
    this.state = { 
    stepState: 0 
    } 
    this.handleNext = this.handleNext.bind(this); 
    this.handlePrev = this.handlePrev.bind(this); 
} 

Answer 3

あなたは、クラスのプロパティとして宣言された関数と変数を持っているバベルプリセットStage-2以下を必要としています。 クラスプロパティ初期化構文はes2016 specificationsの一部であり、transform-class-propertiesプラグインによって受け入れられます。

は、まあ、これは非常に実験的な機能ですが、あなたの.babelrc設定することで、それを使用することができます：

いずれかの追加プリセットステージ-2（npm install --save-dev babel-preset-stage-2）

"presets": ["react", "es2015", "stage-2"] 

または特定のプラグイン（npm install --save-dev babel-plugin-transform-class-properties）

"plugins": ["transform-class-properties"] 

この後、元のコード（belおや）が働くことができます。

class StepperComponent extends React.Component{ 

    state = { 
     stepIndex: 0, 
    } 

    handleNext =() => { 
     const {stepIndex} = this.state; 
     if (stepIndex < 2) { 
      this.setState({stepIndex: stepIndex + 1}); 
     } 
    }; 

    // ...