アロー機能は、「これは」で動作していない結合成分リアクト

Question

私はES6の矢印の機能は、「彼らが呼ばれたときにthisコンテキストを保存する。」それを理解したよう私はReactコンポーネントで、クラスメソッドでこれをバインドするための例を見てきました。

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

しかし、私は矢印の機能に

handleClick = (event) => { 
    this.props.openForm(); 
} 

を使用しようとするとされていない理由、私は次のエラー

Module build failed: SyntaxError: Unexpected token (18:14) 

    16 | } 
    17 | 
> 18 | handleClick = (event) => { 
    |    ^
    19 |  this.props.openForm(); 
    20 | } 
    21 | 

を得る：私は、私はこのようなコンストラクタでバインドすることができます知っていますこれは働いている？

ここで完全なコンポーネント

import React from 'react'; 
import Section from './Section'; 
import { connect } from 'react-redux'; 
import * as actions from '../actions/actions'; 

class Contact extends React.Component { 

    getContent() { 
    return this.props.content || {}; 
    } 

    handleClick = (event) => { 
    this.props.openForm(); 
    } 

    render() { 
    return (
     <Section heading="Contact" bg="white"> 

      <div className="contact"> 

      <h3 className="contact__heading">{ this.getContent().heading }</h3> 

      <p>{ this.getContent().text }</p> 

      <button className="contact__button contact__btn-dialog" 
       onClick={ this.handleClick }> 
       Send a message 
      </button> 

      </div> 

     </Section> 
    ); 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    openForm:() => { 
     dispatch(actions.showContactForm(true)); 
    } 
    }; 
}; 

export default connect(
    null, 
    mapDispatchToProps 
)(Contact); 

Answer 1

を使用すると、矢印の関数としてメソッドを宣言する場合は、コンストラクタでそれをバインドする必要はありませんです。この場合

、bindまたは矢印機能直接ではなく両方のいずれかを使用。

class App extends React.Component { 
 
    constructor() { 
 
    super() 
 

 
    this.handleClick = this.handleClick.bind(this) 
 
    } 
 

 
    handleClick() { 
 
    console.log('with constructor') 
 
    } 
 
    
 
    handleClick2 = (event) => { 
 
    console.log('without constructor') 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <button onClick={this.handleClick}>With constructor</button> 
 
     <button onClick={this.handleClick2}>Without constructor</button> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('root') 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="root"></div>