TSX + React：Uncaught TypeError：Menu.handleClickで未定義のプロパティ 'setState'を読み取ることができません

Question

私はtypescript@2.6.1を使用しており、reactとreact-dom @ 15.6.2を使用しています。

この問題をデバッグできないようです。 未知の型エラー：Menu.handleClickで未定義のプロパティ 'setState'を読み取ることができません。 これはthis.setState((prevState) => {

import * as React from "react"; 
import * as ReactDOM from 'react-dom'; 

import Monaco from './Monaco'; 
import shiftOverlayButtons from '../common/shiftOverlayButtons'; 

export interface Props { 

} 

export interface State { 
    isOpen: boolean; 
} 

export default class Menu extends React.Component<Props, State> { 

    constructor(props: Props) { 
     super(props); 
    } 
    public state: State = { 
     isOpen: false 
     }; 

    public render() { 
     return <button id="overlay-btn" className="menu-btn" onClick={this.handleClick}></button> 
    } 

    public handleClick(): void { 
     this.setState((prevState) => { 
      if(prevState.isOpen === false){ 
       this.openMenu(); 
       return { 
        isOpen: true 
       }; 
      } 
      else { 
       this.closeMenu(); 
       return { 
        isOpen: false 
       } 
      } 
     }); 
    } 

    private openMenu(): void { 
     shiftOverlayButtons(true); 
     ReactDOM.render(<Monaco/>, document.getElementById("overlay")); 
    } 

    private closeMenu(): void { 
     shiftOverlayButtons(false); 
     //ReactDOM.unmountComponentAtNode(document.getElementById("overlay")); 
    } 

} 

ReactDOM.render(<Menu/>, document.body); 

PSである：私はthis.handleClick.bind(this)を行うと、私は別のエラーを取得：ファイルGET：///Users/kalpa/Desktop/monaco-sample/vs/loader.jsネット:: ERR_FILE_NOT_FOUNDを..私はwebpack @ 3.8.1を使用しています。

Answer 1

ハンドルクリック時にバインドがありません。だから、

onClick={this.handleClick}

へ

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

再フォーマットコードから：

handleClick(event) { 
    this.setState({isOpen: !isOpen}).then(()=>{ 
     if(!this.state.isOpen){ 
      //do something when false 
     } else { 
      // do something when true 
     }}} 

Answer 2

ハンドラ用の矢印機能を使用して好みます。私は別のエラーが出ることを行うとhttps://basarat.gitbooks.io/typescript/docs/arrow-functions.html