score:18

Accepted answer

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.

score:2

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

score:6

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

score:9

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>

Related Query

More Query from same tag