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
- How do i create a conditional loading message in react
- Accessing Redux Store from routes set up via React Router
- Why can't `useCallback` always return the same ref
- TypeError: gapi.auth2.grantOfflineAccess is not a function
- state.getStore() or mapStateToProps - React.js / Redux
- How can I use two transitions with material ui?
- How to drag and sort in React Native
- Can't style my React Components by Class Name in Storybook
- Pass Multer validation error to React Component
- image doesn't show up on the web (React)
- Use callback definition of a functional component outside the component
- Problem using fetch in React inside useEffect
- Undifined variable when trying to fill variable with onChange
- How to show button while hover over box using react?
- Server-side react with webpack 2 System.import
- Programmatically triggering a click
- How to show tooltip only for show x values in react charts
- React Typescript - InferProps accepts null but JSX Attributes does not (i.e. id)
- Accessing key property of React component
- How to create a query for multiple ranges?
- Adding variable to script tag in React
- Destructuring props in ReactJS
- React TypeScript: Radio buttons value onChange
- Is it OK to put propTypes and defaultProps as static props inside React class?
- createUser is not a function error while wriiting unit test?
- WebGL mipmap generation fails for TEXTURE_CUBE_MAP
- How to access provider value when using useContext hook
- react components as destructed export
- what does this useState function do and how?
- react: timing ajax request in render()