react Material-ui, How do I know I can use onClick for button?

ReactjsMaterial Ui

Reactjs 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:

onClick possibilities

⬇ Play with it online ⬇

Edit onClick for every component

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

enter image description hereenter image description here

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestioneugeneView Question on Stackoverflow
Solution 1 - ReactjsthirtydotView Answer on Stackoverflow
Solution 2 - ReactjsPranesh RaviView Answer on Stackoverflow
Solution 3 - ReactjsHasan Sefa OzalpView Answer on Stackoverflow
Solution 4 - ReactjskouakView Answer on Stackoverflow
Solution 5 - ReactjsEricgitView Answer on Stackoverflow