Espero que establecer el atributo deshabilitado en un componente de reacción bloquee el controlador onClick para ese elemento.
<a role="button" className={`btn btn-block btn-info`} disabled={!this.state.readyToView} href={this.state.selectedObjectLink} onClick={this.handleLink} >View</a>pero aunque el elemento muestra un atributo "deshabilitado", todavía registra un evento de clic.
Editar: debo aclarar: manejo el evento de clic en handleLink, quiero saber por qué el atributo deshabilitado no elimina el controlador. Lo siento por cualquier confusión.
El problema no es con disabled ; es con el elemento HTML a . Anchor <a> no puede tener una propiedad deshabilitada (¿qué significa eso?). El hecho de que haya pasado CSS para hacer que el elemento se vea como un botón, no lo convierte en un botón. Sigue siendo un ancla.
La solución sería usar otra cosa (como un botón):
<button role="button" className={`btn btn-block btn-info`} disabled={!this.state.readyToView} onClick={this.handleLink} > View </button> Puede usar this.state.selectedObjectLink dentro handleLink si desea redirigir a una página
O use una de las muchas otras sugerencias en esta página.
¿Por qué no simplemente manejar esto en handleLink ?
handleLink () { if (!this.state.readyToView) return // ... }Si realmente desea vincular/eliminar el controlador dinámicamente, puede hacer algo como esto:
const clickHandler = this.state.readyToView ? this.handleLink : null ... <a role="button" ... ... onClick={clickHandler} >View</a>