react Material-ui, How do I know I can use onClick for button?
ReactjsMaterial UiReactjs Problem Overview
The list of properties on the doc doesn't include onClick
(http://www.material-ui.com/#/components/icon-button)
How do I know I need to use onClick for click handler?
Reactjs Solutions
Solution 1 - Reactjs
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>
Solution 2 - Reactjs
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...
Solution 3 - Reactjs
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:
⬇ Play with it online ⬇
Solution 4 - Reactjs
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
Solution 5 - Reactjs
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