javascriptreactjsonclickjsxonitemclick

onClick / onItemClick JSX Syntax React + Office UI Fabric

          <div>
            <CommandBar 
            areNamesVisible={false} areIconsVisible={true}
            items={[
            { name:"James Towns", className:"noHoverEffect", },
            { key:"Info", icon:"Contact", onItemClick={this.handlePanel} },
            { key:"Export", icon:"Download" }
            ]}       />
          </div>

I am using the component CommandBar from Office UI Fabric and I've created the contents as desired as shown in the attached image:

enter image description here

What I am trying to achieve next is attach an onClick or onItemClick to one of the Items.

Not sure how this works entirely and the JSX syntax doesn't seem to be straight forward.

My function is handlePanel any help appreciated, looked up and down the web for a few days couldn't find a pre-existing question.

Thanks

Solution

  • Bind you function name in constructor or use arrow function for the same. So bellow example using bind in constructor

    1. Firstly bind your function inside constructor as below

      this.handlePanel = this.handlePanel.bind(this);

    2. Secondly call function inside component as

      handlePanel(){ // write code here }