Kann keine Funktion auf OnClick Eigenschaft von Reagieren mit Typescript zuweisen

Question

Ich versuche, Schachspiel von FB React Tutorial mit Typoskript umzuschreiben.

Es ist eine lange Reise und ziemlich herausfordernd. Ich habe dies:

ERROR in ./src/Game.tsx 
(79,15): error TS2322: Type '{ className: "square"; onClick: "{this.handleClick}"; }' is not assignable to type 'HTMLProps<HTMLButtonElement>'. 
    Types of property 'onClick' are incompatible. 
    Type '"{this.handleClick}"' is not assignable to type 'EventHandler<MouseEvent<HTMLButtonElement>>'. 

Das ist mein Quellcode:

interface SquareProps extends React.Props<{}> { 
} 
interface SquareState { 
    value: string 
} 
class Square extends React.Component<SquareProps, SquareState> { 
    constructor(props: SquareProps) { 
    super(props) 
    this.state = { value: null } 

    // This binding is necessary to make `this` work in the callback 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick(): void { 
    this.setState({value: 'X'}) 
    } 

    render() { 
    return (
     <button className="square" onClick="{this.handleClick}"> 
     {this.state.value} 
     </button> 
    ); 
    } 
} 

Das ist mein package.json ist

{ 
    "name": "typescript-react-webpack", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "build": "webpack --module-bind 'css=style!css'", 
    "webpack-watch": "webpack --progress --colors --watch --module-bind 'css=style!css'", 
    "start": "serve" 
    }, 
    "devDependencies": { 
    "serve": "^5.1.4", 
    "ts-loader": "^2.0.0", 
    "typescript": "^2.1.6", 
    "webpack": "^2.2.1" 
    }, 
    "dependencies": { 
    "@types/react": "^15.0.23", 
    "@types/react-dom": "^15.5.0", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2" 
    } 
} 

Was mache ich falsch hier?

Answer 1

es sein sollte:

render() { 
    return (
     <button className="square" onClick={ this.handleClick }> 
      {this.state.value} 
     </button> 
    ); 
} 

Der Unterschied ist, dass der onClick Wert nicht in Anführungszeichen gesetzt werden sollte.
Das Anführungszeichen macht es eine Zeichenfolge anstelle einer Referenz auf die Methode.