TypeError：これは未定義です - React JS、Javascript

Question

私はクリック時に名前を変更する簡単な反応コンポーネントを実装しようとしています。私は下のコンポーネントを反応している私のページを読み込んでいる間、エラーの下になっています。 何が間違っていますか？私はJavascriptとReact JSのかなり新しいです。エラーがsetstate行にあるようです。

エラー - 例外TypeError：これはあなたがhandleClickメソッドのコンストラクタでこれをバインドする必要が未定義

class Layer5 extends React.Component { 
    constructor(props) { 
    super(props); 

this.state = {buttonstate: false}; 

    } 

    componentDidMount() { 

    } 

    componentWillUnmount() { 

    } 

handleClick(e) { 
e.preventDefault(); 

    this.setState({buttonstate: !this.state.buttonstate}); 


    } 

    render() { 
    var icon = this.state.buttonstate ? 'images/image1.png' : 'images/image2.jpg'; 

    return (

<div className="layer5"> 
    <a href="#" onClick={this.handleClick}><img src={icon} ></img></a> 
</div> 
    ); 
    } 
} 

Answer 1

a）の矢印の関数を使用して）this（インスタンス上字句閉じプロパティを作成またはb）.bindを使用しますか。

どちらか一方を実行してください。 A）

class Layer5 extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleClick = e => { 
     e.preventDefault(); 

     this.setState({buttonstate: !this.state.buttonstate}); 
    }; 
    } 
} 

またはb）

render() { 
    const icon = this.state.buttonstate ? 'images/image1.png' : 'images/image2.jpg'; 

    return <div className="layer5"> 
     <a href="#" onClick={this.handleClick.bind(this)}> 
      <img src={icon} > 
      </img> 
     </a> 
     </div>; 
    } 
} 

Answer 2

です。

constructor(props) { 
     super(props); 

    this.state = {buttonstate: false}; 
    this.handleClick = this.handleClick.bind(this) 
     }