当禁用为真时，为什么不反应禁用 onClick 处理程序？

Question

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.

Answer 1

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.

Answer 2

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>

Answer 3

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

Answer 4

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

Answer 5

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