1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
import * as React from 'react';
class MyComponent extends React.Component<{}, { count: number }> {
handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {
(event.currentTarget: HTMLButtonElement);
this.setState(prevState => ({
count: prevState.count + 1,
}));
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.handleClick}>
Increment
</button>
</div>
);
}
}
|
{"value":"import * as React from 'react';\n\nclass MyComponent extends React.Component<{}, { count: number }> {\n handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {\n // To access your button instance use `event.currentTarget`.\n (event.currentTarget: HTMLButtonElement);\n\n this.setState(prevState => ({\n count: prevState.count + 1,\n }));\n };\n\n render() {\n return (\n <div>\n <p>Count: {this.state.count}</p>\n <button onClick={this.handleClick}>\n Increment\n </button>\n </div>\n );\n }\n}\n","tokens":[{"type":"T_IMPORT","context":"normal","value":"import","line":1,"start":0,"end":6},{"type":"T_MULT","context":"normal","value":"*","line":1,"start":7,"end":8},{"type":"T_IDENTIFIER","context":"normal","value":"as","line":1,"start":9,"end":11},{"type":"T_IDENTIFIER","context":"normal","value":"React","line":1,"start":12,"end":17},{"type":"T_IDENTIFIER","context":"normal","value":"from","line":1,"start":18,"end":22},{"type":"T_STRING","context":"normal","value":"'react'","line":1,"start":23,"end":30},{"type":"T_SEMICOLON","context":"normal","value":";","line":1,"start":30,"end":31},{"type":"T_CLASS","context":"normal","value":"class","line":3,"start":33,"end":38},{"type":"T_IDENTIFIER","context":"normal","value":"MyComponent","line":3,"start":39,"end":50},{"type":"T_EXTENDS","context":"normal","value":"extends","line":3,"start":51,"end":58},{"type":"T_IDENTIFIER","context":"normal","value":"React","line":3,"start":59,"end":64},{"type":"T_PERIOD","context":"normal","value":".","line":3,"start":64,"end":65},{"type":"T_IDENTIFIER","context":"normal","value":"Component","line":3,"start":65,"end":74},{"type":"T_LESS_THAN","context":"type","value":"<","line":3,"start":74,"end":75},{"type":"T_LCURLY","context":"type","value":"{","line":3,"start":75,"end":76},{"type":"T_RCURLY","context":"type","value":"}","line":3,"start":76,"end":77},{"type":"T_COMMA","context":"type","value":",","line":3,"start":77,"end":78},{"type":"T_LCURLY","context":"type","value":"{","line":3,"start":79,"end":80},{"type":"T_IDENTIFIER","context":"normal","value":"count","line":3,"start":81,"end":86},{"type":"T_COLON","context":"type","value":":","line":3,"start":86,"end":87},{"type":"T_NUMBER_TYPE","context":"type","value":"number","line":3,"start":88,"end":94},{"type":"T_RCURLY","context":"type","value":"}","line":3,"start":95,"end":96},{"type":"T_GREATER_THAN","context":"type","value":">","line":3,"start":96,"end":97},{"type":"T_LCURLY","context":"normal","value":"{","line":3,"start":98,"end":99},{"type":"T_IDENTIFIER","context":"normal","value":"handleClick","line":4,"start":102,"end":113},{"type":"T_ASSIGN","context":"normal","value":"=","line":4,"start":114,"end":115},{"type":"T_LPAREN","context":"normal","value":"(","line":4,"start":116,"end":117},{"type":"T_IDENTIFIER","context":"normal","value":"event","line":4,"start":117,"end":122},{"type":"T_COLON","context":"type","value":":","line":4,"start":122,"end":123},{"type":"T_IDENTIFIER","context":"type","value":"SyntheticEvent","line":4,"start":124,"end":138},{"type":"T_LESS_THAN","context":"type","value":"<","line":4,"start":138,"end":139},{"type":"T_IDENTIFIER","context":"type","value":"HTMLButtonElement","line":4,"start":139,"end":156},{"type":"T_GREATER_THAN","context":"type","value":">","line":4,"start":156,"end":157},{"type":"T_RPAREN","context":"normal","value":")","line":4,"start":157,"end":158},{"type":"T_ARROW","context":"normal","value":"=>","line":4,"start":159,"end":161},{"type":"T_LCURLY","context":"normal","value":"{","line":4,"start":162,"end":163},{"type":"Line","context":"comment","value":"// To access your button instance use `event.currentTarget`.","line":5,"start":168,"end":228},{"type":"T_LPAREN","context":"normal","value":"(","line":6,"start":233,"end":234},{"type":"T_IDENTIFIER","context":"normal","value":"event","line":6,"start":234,"end":239},{"type":"T_PERIOD","context":"normal","value":".","line":6,"start":239,"end":240},{"type":"T_IDENTIFIER","context":"normal","value":"currentTarget","line":6,"start":240,"end":253},{"type":"T_COLON","context":"type","value":":","line":6,"start":253,"end":254},{"type":"T_IDENTIFIER","context":"type","value":"HTMLButtonElement","line":6,"start":255,"end":272},{"type":"T_RPAREN","context":"normal","value":")","line":6,"start":272,"end":273},{"type":"T_SEMICOLON","context":"normal","value":";","line":6,"start":273,"end":274},{"type":"T_THIS","context":"normal","value":"this","line":8,"start":280,"end":284},{"type":"T_PERIOD","context":"normal","value":".","line":8,"start":284,"end":285},{"type":"T_IDENTIFIER","context":"normal","value":"setState","line":8,"start":285,"end":293},{"type":"T_LPAREN","context":"normal","value":"(","line":8,"start":293,"end":294},{"type":"T_IDENTIFIER","context":"normal","value":"prevState","line":8,"start":294,"end":303},{"type":"T_ARROW","context":"normal","value":"=>","line":8,"start":304,"end":306},{"type":"T_LPAREN","context":"normal","value":"(","line":8,"start":307,"end":308},{"type":"T_LCURLY","context":"normal","value":"{","line":8,"start":308,"end":309},{"type":"T_IDENTIFIER","context":"normal","value":"count","line":9,"start":316,"end":321},{"type":"T_COLON","context":"normal","value":":","line":9,"start":321,"end":322},{"type":"T_IDENTIFIER","context":"normal","value":"prevState","line":9,"start":323,"end":332},{"type":"T_PERIOD","context":"normal","value":".","line":9,"start":332,"end":333},{"type":"T_IDENTIFIER","context":"normal","value":"count","line":9,"start":333,"end":338},{"type":"T_PLUS","context":"normal","value":"+","line":9,"start":339,"end":340},{"type":"T_NUMBER","context":"normal","value":"1","line":9,"start":341,"end":342},{"type":"T_COMMA","context":"normal","value":",","line":9,"start":342,"end":343},{"type":"T_RCURLY","context":"normal","value":"}","line":10,"start":348,"end":349},{"type":"T_RPAREN","context":"normal","value":")","line":10,"start":349,"end":350},{"type":"T_RPAREN","context":"normal","value":")","line":10,"start":350,"end":351},{"type":"T_SEMICOLON","context":"normal","value":";","line":10,"start":351,"end":352},{"type":"T_RCURLY","context":"normal","value":"}","line":11,"start":355,"end":356},{"type":"T_SEMICOLON","context":"normal","value":";","line":11,"start":356,"end":357},{"type":"T_IDENTIFIER","context":"normal","value":"render","line":13,"start":361,"end":367},{"type":"T_LPAREN","context":"normal","value":"(","line":13,"start":367,"end":368},{"type":"T_RPAREN","context":"normal","value":")","line":13,"start":368,"end":369},{"type":"T_LCURLY","context":"normal","value":"{","line":13,"start":370,"end":371},{"type":"T_RETURN","context":"normal","value":"return","line":14,"start":376,"end":382},{"type":"T_LPAREN","context":"normal","value":"(","line":14,"start":383,"end":384},{"type":"T_LESS_THAN","context":"jsxTag","value":"<","line":15,"start":391,"end":392},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"div","line":15,"start":392,"end":395},{"type":"T_GREATER_THAN","context":"jsxTag","value":">","line":15,"start":395,"end":396},{"type":"T_JSX_TEXT","context":"jsxChild","value":"\n ","line":15,"start":396,"end":405},{"type":"T_LESS_THAN","context":"jsxTag","value":"<","line":16,"start":405,"end":406},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"p","line":16,"start":406,"end":407},{"type":"T_GREATER_THAN","context":"jsxTag","value":">","line":16,"start":407,"end":408},{"type":"T_JSX_TEXT","context":"jsxChild","value":"Count: ","line":16,"start":408,"end":415},{"type":"T_LCURLY","context":"normal","value":"{","line":16,"start":415,"end":416},{"type":"T_THIS","context":"normal","value":"this","line":16,"start":416,"end":420},{"type":"T_PERIOD","context":"normal","value":".","line":16,"start":420,"end":421},{"type":"T_IDENTIFIER","context":"normal","value":"state","line":16,"start":421,"end":426},{"type":"T_PERIOD","context":"normal","value":".","line":16,"start":426,"end":427},{"type":"T_IDENTIFIER","context":"normal","value":"count","line":16,"start":427,"end":432},{"type":"T_RCURLY","context":"normal","value":"}","line":16,"start":432,"end":433},{"type":"T_LESS_THAN","context":"jsxTag","value":"<","line":16,"start":433,"end":434},{"type":"T_DIV","context":"jsxTag","value":"/","line":16,"start":434,"end":435},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"p","line":16,"start":435,"end":436},{"type":"T_GREATER_THAN","context":"jsxTag","value":">","line":16,"start":436,"end":437},{"type":"T_JSX_TEXT","context":"jsxChild","value":"\n ","line":16,"start":437,"end":446},{"type":"T_LESS_THAN","context":"jsxTag","value":"<","line":17,"start":446,"end":447},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"button","line":17,"start":447,"end":453},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"onClick","line":17,"start":454,"end":461},{"type":"T_ASSIGN","context":"jsxTag","value":"=","line":17,"start":461,"end":462},{"type":"T_LCURLY","context":"normal","value":"{","line":17,"start":462,"end":463},{"type":"T_THIS","context":"normal","value":"this","line":17,"start":463,"end":467},{"type":"T_PERIOD","context":"normal","value":".","line":17,"start":467,"end":468},{"type":"T_IDENTIFIER","context":"normal","value":"handleClick","line":17,"start":468,"end":479},{"type":"T_RCURLY","context":"normal","value":"}","line":17,"start":479,"end":480},{"type":"T_GREATER_THAN","context":"jsxTag","value":">","line":17,"start":480,"end":481},{"type":"T_JSX_TEXT","context":"jsxChild","value":"\n Increment\n ","line":17,"start":481,"end":510},{"type":"T_LESS_THAN","context":"jsxTag","value":"<","line":19,"start":510,"end":511},{"type":"T_DIV","context":"jsxTag","value":"/","line":19,"start":511,"end":512},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"button","line":19,"start":512,"end":518},{"type":"T_GREATER_THAN","context":"jsxTag","value":">","line":19,"start":518,"end":519},{"type":"T_JSX_TEXT","context":"jsxChild","value":"\n ","line":19,"start":519,"end":526},{"type":"T_LESS_THAN","context":"jsxTag","value":"<","line":20,"start":526,"end":527},{"type":"T_DIV","context":"jsxTag","value":"/","line":20,"start":527,"end":528},{"type":"T_JSX_IDENTIFIER","context":"jsxTag","value":"div","line":20,"start":528,"end":531},{"type":"T_GREATER_THAN","context":"jsxTag","value":">","line":20,"start":531,"end":532},{"type":"T_RPAREN","context":"normal","value":")","line":21,"start":537,"end":538},{"type":"T_SEMICOLON","context":"normal","value":";","line":21,"start":538,"end":539},{"type":"T_RCURLY","context":"normal","value":"}","line":22,"start":542,"end":543},{"type":"T_RCURLY","context":"normal","value":"}","line":23,"start":544,"end":545}],"errors":[]}