menu

Questions & Answers

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.

Comments:
2023-01-19 23:25:07
use the css property pointer-events: none;, it may help.
2023-01-19 23:25:07
If the state has changed, just render the element again without the onClick handler
2023-01-19 23:25:07
and how about setting handleLink as a function which depends on conditions can return true or false?
Answers(5) :

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

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>
Comments:
2023-01-19 23:25:08
I do handle it in handleLink(), but I'm confused as to why react doesn't disable the handler when disabled is true?
2023-01-19 23:25:08
Because it's a <a>, not a <button>. there is no disabled attribute in <a>

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.

Comments:
2023-01-19 23:25:08
I would assume disabled for an anchor would do just that, disable the link by removing the click handler - but I can see now that disabled is not a valid attribute for anchor tags: dev.w3.org/html5/html-author/#the-a-element

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} />

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