ReactJSエラー構文エラー：予期しないトークンが必要です。 （19:21）（material-ui）

Question

ReactJSの新機能ですが、現在、RaisedButtonとMaterial-UIのForm Dialogを組み合わせようとしていますが、onClick-関数。 また、ヘッドアップ：コードは非常に長いです。私はあなたが「小さくて実証可能な例」を使用することになっていることを知っていますが、私はReactJSにはとても新しいので、どのコードが適切かどうかわかりません。ボタンの

スクリプト：

const styles = theme => ({ 
    button: { 
    margin: theme.spacing.unit, 
    }, 
    input: { 
    display: 'none', 
    }, 
}); 

function RaisedButtons(props) { 

const { classes } = props; 

constructor(props) { 
    super(props); 
    this.handleClick = this.handleClick.bind(this); 
} 

handleClick = (e) => { 
    this.classes.handleClickOpen(); 
}; 
    return (
    <div> 
     <Button raised color="primary" className={classes.button} onClick={this.handleClick}> 
     Create a new file 
     </Button> 
    </div> 
); 
} 
RaisedButtons.propTypes = { 
    classes: PropTypes.object.isRequired, 
}; 

export default withStyles(styles)(RaisedButtons); 

これは（その名前が示す何をhandleClickOpen機能を呼び出し、私のダイアログコンポーネント内のボタンを、意味する）ダイアログのスクリプトです。

<ButtonRaised handleClickOpen={this.handleClickOpen}/> 

コードを実行しようとすると、私は（私のRaisedButtonスクリプトのために）次のエラーを取得する：

Syntax error: Unexpected token, expected ; (19:21) 
    17 | const { classes } = props; 
    18 | 
> 19 | constructor(props) { 
    |     ^
    20 |  super(props); 
    21 |  this.handleClick = this.handleClick.bind(this); 
    22 | } 

私が意味する、私は問題がどこにあるかを理解し、私は方法がわかりませんそれを修正する。私はいくつかの他の質問を読んだ。そこでは、関数はおそらく適切に定義されておらず、それを定義する他の方法を示していたが、役に立たなかったという。 コンストラクタメソッドを削除しようとしましたが、handleClickが定義されていないと言われました。

constructor = (props) => { 
    super(props); 
    this.handleClick = this.handleClick.bind(this); 
} 

としてコンストラクタメソッドを書くとき

は、私は次のエラーを得た：

Syntax error: 'super' outside of function or class (20:2) 

誰もが私が間違ってやっているか、どのようにそれを修正するために何を知っていますか？あなたがメソッドやコンストラクタを使用したい場合はReact.Componentはなく、純粋な関数として拡張するクラスとしてコンポーネントを定義する必要が

Answer 1

：

class RaisedButtons extends React.Component { 

constructor(props) { 
    super(props); 
    this.handleClick = this.handleClick.bind(this); 
} 

handleClick = (e) => { 
    this.props.classes.handleClickOpen(); 
}; 

render() { 
    const { classes } = props; 
    return (
    <div> 
     <Button raised color="primary" className={classes.button} onClick={this.handleClick}> 
     Create a new file 
     </Button> 
    </div> 
); 
} 

}