CODEWITHSUNDEEP
reactjsmaterial-ui
eugene
eugene

Reputation: 41745

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?

Upvotes: 110

Views: 210119

Answers (6)

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20118

We should alway have to provide onClick event to parent because sometimes depends on browser, events might not work if we provided in to the child componet.

Example:

Error:

<TextField
    label={label}
    value={state.inputValue}
    InputProps={{
        endAdornment: (
            <InputAdornment position='end'>
                <IconButton style={{ padding: '3px' }}>
                    {state.inputValue?.length > 1 ? (
                        <ClearIcon onClick={handleClear}/>
                    ) : (
                        <DateRangeIcon onClick={onAdornmentClick}/>
                    )}
                </IconButton>
            </InputAdornment>
        ),
    }}
/>

Solution:

<TextField
    label={label}
    value={state.inputValue}
    InputProps={{
        endAdornment: (
            <InputAdornment position='end' onClick={state.inputValue?.length > 1 ? handleClear : onAdornmentClick}>
                <IconButton style={{ padding: '3px' }}>
                    {state.inputValue?.length > 1 ? (
                        <ClearIcon/>
                    ) : (
                        <DateRangeIcon/>
                    )}
                </IconButton>
            </InputAdornment>
        ),
    }}
/>

Upvotes: 0

Ericgit
Ericgit

Reputation: 7103

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

Upvotes: 2

Hasan Sefa Ozalp
Hasan Sefa Ozalp

Reputation: 7204

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

Upvotes: 13

thirtydot
thirtydot

Reputation: 228232

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>

Upvotes: 110

kouak
kouak

Reputation: 773

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

Upvotes: 5

Pranesh Ravi
Pranesh Ravi

Reputation: 19133

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

Upvotes: 15

Related Questions