score:99
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
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:
⬇ Play with it online ⬇
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...
Source: stackoverflow.com
Related Query
- react Material-ui, How do I know I can use onClick for button?
- How can I use a button to change the Theme for material UI on my site? this is where I am so far
- How can I test a button which uses props.history for it's onClick with react testing library?
- How to know if react-router can go back to display back button in react app
- How can I use CSS @media for responsive with makeStyles on Reactjs Material UI?
- How I can disable a button in React js for 5 seconds after click event
- How can I use React Material UI's transition components to animate adding an item to a list?
- How do I add AppBar with Back to Top button from Material UI for React in my App?
- How can I use Font Awesome icons in an Office UI Fabric React icon button component?
- I use React js and Material-UI. How can i validate "correct" green color validation on button submit click?
- How can I use create-react-app for React version 16.x.x with TypeScript?
- How to use React Redux state for conditionally showing and Disabling a Button
- Material ui v4: I want to customize a Material UI button inside a class component using types script. Kindly let me know how can I do it?
- How to get the TextField value with onclick button event React Material UI
- How can I use withRouter in react router v6 for passing props?
- Material UI Button - How can I use "::first-letter" pseudo element selector with MuiButton class?
- How can i use useParams() with an onClick button to navigate to different pages and display the data in react.js?
- How do I use TextfieldProps from Material UI Props for a React Application?
- How can I add onClick event for Ref Element using React Hooks?
- React | Npm package - How can I export 2 components for use as an npm package
- How can I create a counter as components to use multiple times and create one button to reset all the counter in React JS?
- How can I pass a value from the backend to a React frontend and use that value in the CSS for the frontend?
- How can I use React Testing Library to simulate clicking on Material UI RadioGroup option?
- how can i use history.push instead Link for nested routing in react
- For Material UI, how can I know what the properties of each components are?
- How can I use React style imports for my own files?
- How can I change the onClick function of a button saved in a useRef object in a react component?
- How can I use different dynamic slug url for same component React js?
- React useState: How can I update my useState with onChange for input and OnClick for the button?
- Use text that is passed through props, to know which constant is called for button onClick
More Query from same tag
- debounce and react window resize this reference issue
- Ant Design Popconfirm confirm on [ENTER]?
- Changing two states sequentially throws an error
- get items from api into list in react
- How to rotate component in MUI v5?
- How do I send a put request to my API with just a button or a div?
- react-admin: how to customise the bulk actions
- responsive image in React
- get only that object from array of which which has the property true in react with typescript
- Lifecycle - fetch data only after loading complete
- how to access a property inside an another property in the same class
- Count arrays with values in state in React
- Node js - ejs: How to run password check on login/register form
- React put query string into form's value attribute
- How to get bootstrap card to stay in the middle of the screen in reactjs
- Typescript Stateless React Component as named function
- Check uniqueness with in nested object property values in array of objects
- Can't npm install local dependency
- Grommet - custom component in FormField
- Module not found: 'cldr' in ... \globalize\dist\globalize
- Nested axios api request / call not rendering in child component reactjs
- how to get the text-underline from strapi articles to my gatsby frontend
- react dropzone, limiting the number of pics uploaded, and giving an error message when limit exceeded
- Getting cursor position and relevant data from Highmaps
- How can i create component Input using react-hook-form?
- AceEditor setValue() not triggering my React App's onChange function
- Map function with Graphql, React
- Is there a way to avoid optional properties in React + Redux?
- Difficulty storing values in const and maintain state of the inputted value ( not props)
- React-big-calendar incorrect time display