score:99

Accepted answer

the material-ui documentation does not list the standard react (native browser) events:

https://facebook.github.io/react/docs/events.html#mouse-events

this is because it's expected that you are already aware of the available native events. for example, you can also use onwheel. it would be a long and redundant list if all the native events were included.

as kouak explains, other props (such as onclick) are passed down to a relevant child component.

random example:

<button color="primary" onclick={() => { console.log('onclick'); }}>
    primary
</button>

score:1

handling clicks

all components accept an onclick handler that is applied to the root dom element.

<button onclick={() => { alert('clicked') }}>click me</button>

note that the documentation avoids mentioning native props (there are a lot) in the api section of the components. api for button

enter image description hereenter image description here

score:5

just add onclick to the props you pass down into <iconbutton />.

props that are not cited in the doc are passed down into their internal <enhancedbutton /> component which will handle onclick just fine.

see here : https://github.com/callemall/material-ui/blob/master/src/iconbutton/iconbutton.js#l241

score:9

remember, you can use onclick in every singe component that have a dom renderer since it is a native react event (it doesn't have to be a button component).

example 1:

<paper
  classname={classes.paper}
  onclick={() => {
    alert("✔️ this works on every component!");
  }}
>
  click me!
</paper>

example 2:

onclick possibilities

⬇ play with it online ⬇

edit onclick for every component

score:13

you can add an wrapper over the <iconbutton/> to get the onclick event.

example

render() {
  return <div class="font-icon-wrapper" onclick={this.fonticonclick}>
    <iconbutton iconclassname="muidocs-icon-custom-github" />
  </div>
}

this should definitely work...


Related Query

More Query from same tag