箭頭函數「this」綁定在React組件中不起作用

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

如果聲明的方法，你不必將它綁定在構造Arrow功能。

在這種情況下，請直接使用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>