Add IconButton onClick event Handler to Documentation

[eguneys]

IconButton onClick event handler took me a couple of hours to find out.

[corvuscornix]

onClick should work

[shaurya947]

@eguneys shouldn't you rather be using onTouchTap?

Either way, would you like to submit a PR adding the event to the doc? Should only take a couple minutes :)

[estaub]

Consider reopening; I believe this got lost somehow. The doc at http://www.material-ui.com/#/components/icon-button still does not contain any info on click handling (including onTouchTap). And it took me over an hour, too.

[mbrookes]

#3172

[LeoPovoa]

Hi, I can't handle the click event on IconButton. What's wrong in my code ??? Icon Button is in a toolbar element.

handleToggle() {
window.console.log("Click!");
}

       <ToolbarGroup firstChild={true}>
       <IconButton 
          onClick={this.handleToggle}
          iconStyle={stylesI.smallIcon}
          style={stylesI.small} >
          <ImageDehaze />
       </IconButton>
      </ToolbarGroup>
    </Toolbar>

[estaub]

@LeoPovoa "this" is not bound. Try it with function that's not a class member; if it works, that's your problem. You need to bind your handler to "this". http://stackoverflow.com/questions/29732015/value-of-this-in-react-event-handler

[Paelsis]

I have bound the callback function to this in constructor and it still does not work.
When I replace IconButton tag with normal button tag and onClick={...} it works as expected !

[estaub]

@Paelsis Everything changed in this area 4 days ago, when v.19 came out.
See #7605 .
I haven't used v.19 yet, but there's a good chance it will fix your problem.

For pre-v.19:

Be sure to use doc that corresponds to the version you're using; there's a version dropdown at the top of the left navbar on the docs. onTouchTap was replaced with onClick in v.19.

I don't have time to chase this, but looking at my code I'm seeing that I use onTouchTap on all IconButtons, and I know that works; note that it is documented and onClick is not. Consider trying it. If you haven't used it before, be sure to have the react-tap-event-plugin installed and initialized; see http://www.material-ui.com/v0.18.7/#/get-started/installation

[Paelsis]

Thanks a lot, I'll try to update version 🙂 Med vänlig hälsning Per Gustav Eskilson Mobil: (+46)733-780749 18 aug. 2017 kl. 22:48 skrev Ed Staub <notifications@github.com<mailto:notifications@github.com>>: @Paelsis<https://github.com/paelsis> Everything changed in this area 4 days ago, when v.19 came out. See #7605<#7605> . I haven't used v.19 yet, but there's a good chance it will fix your problem. For pre-v.19: Be sure to use doc that corresponds to the version you're using; there's a version dropdown at the top of the left navbar on the docs. I don't have time to chase this, but looking at my code I'm seeing that I use onTouchTap on all IconButtons, and I know that works; note that it is documented and onClick is not. Consider trying it. If you haven't used it before, be sure to have the react-tap-event-plugin installed and initialized; see http://www.material-ui.com/v0.18.7/#/get-started/installation Note well: onTouchTap was removed in v.19. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#1340 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AZkoP7aMXR7UnXTf8j2QTMaArpPMTScpks5sZfimgaJpZM4Fl4FO>.

[Konstrictorman]

I have bound the callback function to this in constructor and it still does not work.
When I replace IconButton tag with normal button tag and onClick={...} it works as expected !

Did you solved this?. Please tell me how... I'm having the same exact situation

[myamyamya]

I did it like this and it worked pretty well:
<IconButton onClick={() => {myFunction();}}>...</IconButton>

[shahjigar556]

<SearchIcon style={{color:'white'}} />
can I add onClick Funtionality to this searchIcon

[brendanhealey]

IconButton onClick event handler took me a couple of hours to find out.

And for the benefit of all the other people who have just spent an hour trying to find out this information it's:

event: React.MouseEvent<HTMLButtonElement, MouseEvent>

[dizonb]

Wrap any MUI component over your IconButton. In my case I'm using Box component.
I tried it and it worked!

<Box onClick={handleClick}>
            <IconButton sx={{ p: '10px' }} aria-label="menu" color="primary">
              {customIcon}
            </IconButton>
</Box>