Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
private foo: string = "some string";
public render(): React.ReactElement<IHelloWorldProps> {
return (
<button type="button" onClick={ this.onClickHandler }>
trigger problem
</button>
);
}
private onClickHandler(): void {
console.log(`Value of 'this'`, this);
alert(`Value of foo: ${ this.foo }`);
}
}
export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
private foo: string = "some string";
public render(): React.ReactElement<IHelloWorldProps> {
return (
<button type="button" onClick={ this.onClickHandlerArrow }>
fixed with arrow
</button>
);
}
private onClickHandlerArrow = (): void => {
console.log(`Value of 'this'`, this);
alert(`Value of foo: ${ this.foo }`);
}
}
export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
private foo: string = "some string";
constructor(props: IHelloWorldProps) {
super(props);
this.onClickHandlerBind = this.onClickHandlerBind.bind(this);
}
public render(): React.ReactElement<IHelloWorldProps> {
return (
<button type="button" onClick={ this.onClickHandlerBind }>
fixed with bind
</button>
);
}
private onClickHandlerBind(): void {
console.log(`Value of 'this'`, this);
alert(`Value of foo: ${ this.foo }`);
}
}
export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
private foo: string = "some string";
public render(): React.ReactElement<IHelloWorldProps> {
return (
<button type="button" onClick={ (e) => this.onClickHandlerInlineArrow(e) }>
fixed with arrow
</button>
);
}
private onClickHandlerInlineArrow(event): void {
console.log(`Value of 'this'`, this);
alert(`Value of foo: ${ this.foo }`);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.