Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 488
eugene Avatar asked Oct 21 '16 02:10

eugene


People also ask

Can you use onClick in React?

The React onClick event handler enables you to call a function and trigger an action when a user clicks an element, such as a button, in your app. Event names are written in camelCase, so the onclick event is written as onClick in a React app. In addition, React event handlers appear inside curly braces.

Can I use onClick on Div React?

To set your mind at ease, the onClick event does work with divs in react, so double-check your code syntax.

How do you make an onClick button in React?

Adding EventsReact events are written in camelCase syntax: onClick instead of onclick . React event handlers are written inside curly braces: onClick={shoot} instead of onClick="shoot()" .


2 Answers

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> 
like image 108
thirtydot Avatar answered Oct 06 '22 07:10

thirtydot


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...

like image 21
Pranesh Ravi Avatar answered Oct 06 '22 07:10

Pranesh Ravi