Tengo este componente de botón en mi aplicación React:
<button onClick={() =>alert('hi')} disabled={true}>test</button> Esperaba cuándo eliminaría el atributo disabled en el navegador como:
<button disabled>test</button>a:
<button>test</button>Se debe hacer clic en el botón y debe aparecer una alerta, pero no sucedió.
¿Por qué el botón no activa el mensaje de alerta después de eliminar el atributo dentro del navegador?
El <button> que renderizas con react no es el elemento DOM real sino un componente integrado que administra su estado internamente. Por lo tanto, los accesorios que pasa a ese componente solo se reflejan en el DOM cuando la reacción lo vuelve a renderizar cuando los accesorios o el estado han cambiado.
Pero React no sabe que eliminó el atributo disabled en el DOM. Desde la perspectiva de reaccionar, el botón aún está deshabilitado y, por lo tanto, los eventos de clic se suprimen. Al administrar el DOM con reaccionar, no debe intentar manipular el DOM desde el exterior, ya que reaccionar no se dará cuenta de ningún cambio y se anulará con cada renderizado.
También los eventos en los componentes incorporados son administrados por el propio manejo de eventos de React. Entonces, el controlador que pasó al componente <button> no es el mismo que si lo proporcionara directamente al elemento DOM.
Según su código, puedo ver que no eliminó el atributo deshabilitado . Solo eliminaste la parte {true} . Mantener el atributo deshabilitado , incluso si no está establecido en verdadero, deshabilitará el botón, razón por la cual no se activa. Prueba esto :-
<button onClick={() => alert("hi")}>test</button>