Passing functions to onClick

I have created a dropdown meny with an Image acting like the trigger like so:

    <Image
          alt="Plus"
          aria-controls="long-menu"
          className={classes.plus}
          src={Plus}
          {...bindTrigger(popupState)}
          // onClick={handleClick}
        />

I want to pass a function called handleClick to onClick, but if I remove the comment then it overrides the onClick function generated by bindtrigger. I wanted to ask if there is a way to pass handleClick to the generated onClick?

[jedwards1211]

Yeah currently there isn’t a convenient way to handle this.

If you need to preventDefault or stopPropagation, there might be a nearby ancestor element you could do so on. Otherwise, right now you’ll have to do

onClick={e => {
  // perform additional action...and then:
  bindTrigger(popupState).onClick(e)
}}

If you just need to perform an additional effect when the popup is opened, and you’re using a functional component, I would recommend performing an effect when popupState.isOpen changes:

React.useEffect(() => {
  if (popupState.isOpen) {
    // popup was just opened, do something
    // popupState.anchorEl is the element that was clicked
  }
}, [popupState.isOpen])

This is better since if you later need to add additional ways the popup can be opened, all of them will trigger this effect, whereas an onClick handler wouldn’t respond to the new ways of opening the popup.

There are several ways I could make the API support this, none I’m 100% happy with, each one is awkward in some way. Also, does the popup get opened before or after your onClick handler? Some people might want before, some after, and adding an option to control that would make these examples even more bulky. At least if you do the wrapping yourself, as in my example above, you have complete freedom to control this.

Possibility 1

{bindTrigger(
  popupState,
  <Image
    alt="Plus"
    onClick={handleClick}
  />
)}

Possibility 2

<Image
  alt="Plus"
  {...bindTrigger(popupState, {
    onClick: handleClick,   
  })}
/>

Possibility 3

// at root level:
const TriggerImage = createTrigger(Image)

// somewhere later:
<TriggerImage
  popupState={popupState}
  alt="Plus"
  onClick={handleClick}
/>

[jedwards1211]

Actually let me think about it some more. i guess we could store the previous username onClick in a ref in the popup state and use that to memoize. But I’d need to make the <PopupState> component use hooks internally and drop support for React pre-hooks.