When writing a react based SPFx application one has to make a note that ES6 React.Component doesn’t auto bind methods to itself.<\/p>\n\n\n\n

Hence it’s required to manually bind and the following are two ways to do it.<\/p>\n\n\n\n

Method 1<\/h2>\n\n\n\n

onClick={this.addButtonClicked.bind(this)}<\/p><\/blockquote>\n\n\n\n

import * as React from 'react';\n\nimport { Stack, IStackProps, IStackStyles } from 'office-ui-fabric-react\/lib\/Stack';\nimport { ActionButton } from 'office-ui-fabric-react\/lib\/Button';\nimport { IIconProps } from 'office-ui-fabric-react\/';\n\nimport { ITestComponentState } from '.\/ITestComponentState';\nimport { ITestComponentProps } from '.\/ITestComponentProps';\n\n\/\/Stack related styles\nconst outerStackTokens = {\n    childrenGap: 50\n};\nconst addFriendIcon: IIconProps = { iconName: 'Add' };\n\nlet outerStackStyles: Partial<IStackStyles> = {};\nlet innerStackColumnProps: Partial<IStackProps> = {};\n\nexport default class TestComponent extends React.Component<ITestComponentProps, ITestComponentState> {\n    constructor(props: ITestComponentProps) {\n        super(props);\n        this.state = {\n            items: []\n        };\n    }\n  \n    public render(): React.ReactElement<{}> {\n        return (\n            <div>\n                <Stack horizontal tokens={outerStackTokens} styles={outerStackStyles}>\n                    <Stack verticalAlign="start" {...innerStackColumnProps}>\n                        <Stack.Item align="start" >\n                            <ActionButton iconProps={addFriendIcon} onClick={this.addButtonClicked.bind(this)} allowDisabledFocus disabled={this.state.sortItems.length >= 10 ? true : false} >Add Item<\/ActionButton>\n                        <\/Stack.Item>\n                    <\/Stack>\n                <\/Stack>\n            <\/div>\n        );\n    }\n\n    private addButtonClicked(event?: React.MouseEvent<HTMLButtonElement>) {\n        let itemsOnAdd = this.state.items;\n        let itemTitle = "Item " + (this.state.items.length + 1);\n        itemsOnAdd.push({ title: itemTitle });\n        this.setState({ items: itemsOnAdd });\n    }\n}<\/pre><\/div>\n\n\n\n
Method 2<\/h2>\n\n\n\n
this.addButtonClicked = this.addButtonClicked.bind(this);<\/p><\/blockquote>\n\n\n\n
import * as React from 'react';\n\nimport { Stack, IStackProps, IStackStyles } from 'office-ui-fabric-react\/lib\/Stack';\nimport { ActionButton } from 'office-ui-fabric-react\/lib\/Button';\nimport { IIconProps } from 'office-ui-fabric-react\/';\n\nimport { ITestComponentState } from '.\/ITestComponentState';\nimport { ITestComponentProps } from '.\/ITestComponentProps';\n\n\/\/Stack related styles\nconst outerStackTokens = {\n    childrenGap: 50\n};\nconst addFriendIcon: IIconProps = { iconName: 'Add' };\n\nlet outerStackStyles: Partial<IStackStyles> = {};\nlet innerStackColumnProps: Partial<IStackProps> = {};\n\nexport default class TestComponent extends React.Component<ITestComponentProps, ITestComponentState> {\n    constructor(props: ITestComponentProps) {\n        super(props);\n        this.state = {\n            items: []\n        };\n        this.addButtonClicked = this.addButtonClicked.bind(this);\n    }\n  \n    public render(): React.ReactElement<{}> {\n        return (\n            <div>\n                <Stack horizontal tokens={outerStackTokens} styles={outerStackStyles}>\n                    <Stack verticalAlign="start" {...innerStackColumnProps}>\n                        <Stack.Item align="start" >\n                            <ActionButton iconProps={addFriendIcon} onClick={this.addButtonClicked} allowDisabledFocus disabled={this.state.sortItems.length >= 10 ? true : false} >Add Item<\/ActionButton>\n                        <\/Stack.Item>\n                    <\/Stack>\n                <\/Stack>\n            <\/div>\n        );\n    }\n\n    private addButtonClicked(event?: React.MouseEvent<HTMLButtonElement>) {\n        let itemsOnAdd = this.state.items;\n        let itemTitle = "Item " + (this.state.items.length + 1);\n        itemsOnAdd.push({ title: itemTitle });\n        this.setState({ items: itemsOnAdd });\n    }\n}<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
When writing a react based SPFx application one has to make a note that ES6 React.Component doesn’t auto bind methods to itself. Hence it’s required to manually bind and the following are two ways to do it. Method 1 onClick={this.addButtonClicked.bind(this)} Method 2 this.addButtonClicked = this.addButtonClicked.bind(this);<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[305,62],"tags":[],"yoast_head":"\n