-
-
Save mikezimm/21f9aba939def8f05aa709c6ab866c73 to your computer and use it in GitHub Desktop.
How to pass a function to a from a React CommandBar class to another service file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import MyCommandBar from '../CommandBar/CommandBar' | |
export default class PivotTiles extends React.Component<IPivotTilesProps, IPivotTilesState> { | |
public constructor(props:IPivotTilesProps){ | |
super(props); | |
this.state = { | |
..... | |
}; | |
..... | |
this.toggleTips = this.toggleTips.bind(this); | |
} | |
public render(): React.ReactElement<IPivotTilesProps> { | |
return (<MyCommandBar | |
toggleTips= { this.toggleTips } | |
/> ) | |
} | |
public toggleTips = (item: any): void => { | |
let newshowTips = this.state.showTips === 'none' ? 'yes' : 'none'; | |
this.setState({ | |
showTips: newshowTips, | |
}); | |
} //End toggleTips | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Utils from './utils' //Has some functions to build up command bar commands | |
export default class MyCommandBar extends React.Component<ICommandBarProps, ICommandBarState> { | |
constructor(props: ICommandBarProps, state: ICommandBarState) { | |
super(props); | |
this.state = { | |
}; | |
} | |
// HOW DO I GO FROM THIS: | |
// farItems={this.getFarItems()} | |
// TO THIS (basically move getFarItems() function to a file called utils.ts ) | |
// farItems={Utils.getFarItems()} | |
public render(): JSX.Element { | |
const _utils = new Utils(); | |
let farItems = _utils.getFarItems(); | |
// Also tried this and changing getFarItems to receive it and put into onClick but it did not work. | |
// let farItems = _utils.getFarItems(this.props.toggleTips()); | |
return ( | |
<div className={styles.container}> | |
<CommandBar | |
items={Utils.getMainItems()} | |
farItems={ farItems } | |
/> | |
</div> | |
); | |
} | |
//This function works when it's in the commandbar.tsx file but not when I move it to utils.ts | |
private getFarItems___WANT_TO_MOVE_TO_Utils_ts() { | |
return [ | |
{ | |
key: 'mini', | |
name: '', | |
ariaLabel: 'Minimize', | |
iconProps: { iconName: 'ChromeMinimize' }, | |
onClick: () => console.log() | |
}, | |
{ | |
key: 'tips', | |
name: '', | |
ariaLabel: 'Tips', | |
iconProps: { iconName: 'Help' }, | |
onClick: () => this.props.toggleTips() | |
}, | |
] | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default class Utils { | |
//What is correct syntax for setting up this function? | |
// I need to be able to call WhatDoIPutHere.toggleTips() where toggleTips is a function on main webpart class. | |
// public getItemsExamplex = () => { | |
// public getItemsExamplex = (do I need to get the this from the webpart here?) => { | |
public getFarItems() { | |
//I want to get the this.props.toggleTips() from MyCommandBar class which called it | |
return [ | |
{ | |
key: 'mini', | |
name: '', | |
ariaLabel: 'Minimize', | |
iconProps: { | |
iconName: 'ChromeMinimize' | |
}, | |
onClick: () => console.log() | |
}, | |
{ | |
key: 'tips', | |
name: '', | |
ariaLabel: 'Tips', | |
iconProps: { | |
iconName: 'Help' | |
}, | |
onClick: () => WhatDoIPutHere.toggleTips() | |
}, | |
] | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment