予期せぬトークン= on reactjsのイベントハンドルon v15

Question

私はcopenでreactjs v15をプレイしています。 https://codepen.io/dotku/pen/QqwgVV?editors=1010

class Welcome extends React.Component { 
    _handleClick = (e) => { 
    console.log(ReactDOM.findDOMNode(this.refs.input)); 
    } 
    render() { 
    return <div> 
     <h1>Hello, {this.props.name}</h1> 
     <button onKeyPress={this._handleClick}>click</button> 
     <input ref="input"/> 
    </div>; 
    } 
} 

const element = <Welcome name="Sara" />; 
ReactDOM.render(
    element, 
    document.getElementById('root') 
); 

誰もが任意のアイデア理由があります。私はここで

_handleClick = (e) => { 
    console.log(ReactDOM.findDOMNode(this.refs.input)); 
    } 

は私の完全codepen上でコードを反応さライン上unexpected token = errorを得ましたか。

Answer 1

このようにコードを変更します。矢印関数の代わりに従来の関数を使用し、それをコンストラクタまたはレンダリング関数の中でバインドするだけです。

// class Input extends React.Component { 
// render() { 
//  return <input type="text" value="aInput"/>; 
// } 
// } 
class Welcome extends React.Component { 
    _handleClick(e) { 
    console.log(ReactDOM.findDOMNode(this.refs.input)); 
    } 
    render() { 
    return <div> 
     <h1>Hello, {this.props.name}</h1> 
     <button onKeyPress={this._handleClick.bind(this)}>click</button> 
     <input ref="input"/> 
    </div>; 
    } 
} 

const element = <Welcome name="Sara" />; 
ReactDOM.render(
    element, 
    document.getElementById('root') 
); 

代替を使用すると、矢印の機能を進める必要がある場合は、上述したようバベルで実験的な機能を有効にする必要がある上、コメントに記載されています。次のnpmコマンドはそのトリックを行います。

npm install --save-dev babel-plugin-transform-class-properties 

また、バーベルのステージ2の機能を有効にするには、実際に矢印機能に固執する必要がある場合は、このトリックを実行します。

npm install --save-dev babel-preset-stage-2