CODEWITHSUNDEEP
javascriptreactjs
Bud
Bud

Reputation: 1501

Why doesn't react disable the onClick handler when disabled is true?

I would expect that setting the disabled attribute on a react component would block the onClick handler for that element.

 <a role="button"
        className={`btn btn-block btn-info`}
        disabled={!this.state.readyToView}
        href={this.state.selectedObjectLink}
        onClick={this.handleLink}
        >View</a>

but although the element shows a "disabled" attribute it still registers a click event.

Edit: I should clarify - I handle the click event in handleLink, I want to know why the disabled attribute doesn't remove the handler? Sorry for any confusion.

Upvotes: 16

Views: 43980

Answers (5)

Richard Ramos
Richard Ramos

Reputation: 59

Another trick to disable the click to any components is to use useState with boolean value either true to disable or false to resume the click functionality

example

export default const ElementComponent() =>{

    //set the initial value of disable click to false
    const [disableClick,setDisableClick] = useState(false)
 
    const anotherFunction =() =>{
        console.log("I've been run")
    }

    const handleClick()=>{
        //if disableClick is false then run this if block, else don't do anything
        if(!disableClick){
            anotherFunction()
        }
    }

    return(
        <img src="..." onClick={handleClick}/>
    )
}

the good thing about this is that we can pass the function as a props to another components and we can run it there, we can even let's say disable a click for let's say 1 second using setTimeout function, there are tons of way you can use this method, hope it helps anyone if you want to use onClick not only on the button element itself

Upvotes: -1

Aljohn Yamaro
Aljohn Yamaro

Reputation: 2891

If you are using react version 16 and up

on onClick don't call the method directly use () => method instead like this

const handleRemoveBtnClick = () => {
 ...
}

<button ...onClick={() => handleRemoveBtnClick} />

Upvotes: 2

Kousha
Kousha

Reputation: 36299

The problem isn't with disabled; it's with the HTML element a. Anchor <a> cannot have a disabled property (what does that even mean?). Just because you've passed CSS to make the element look like a button, doesn't make it a button. It is still an anchor.

The solution would be either to use something else (like button):

<button 
  role="button"
  className={`btn btn-block btn-info`}
  disabled={!this.state.readyToView}
  onClick={this.handleLink}
>
  View
</button>

You can use this.state.selectedObjectLink inside handleLink if you want to redirect to a page

Or use one of the many other suggestions on this page.

Upvotes: 18

CodinCat
CodinCat

Reputation: 15924

Why not just handle this in handleLink?

handleLink () {
  if (!this.state.readyToView) return
  // ...
}

If you really want to bind/remove the handler dynamically, you can do something like this:

const clickHandler = this.state.readyToView ? this.handleLink : null
...
<a role="button"
  ...
  ...
  onClick={clickHandler}
>View</a>

Upvotes: 9

QoP
QoP

Reputation: 28407

You can add a condition in your click handler, something like this

<a role="button"
        className={`btn btn-block btn-info`}
        disabled={!this.state.readyToView}
        onClick={this.state.readyToView && this.handleLink}
        >
        View
</a>

jsfiddle

Upvotes: 6

Related Questions