Quiero mostrar un mensaje cuando el usuario pasa el mouse sobre el botón 'Validar' cuando solo está deshabilitado. Hice el siguiente código pero no pasó nada.
<button type="button" className="frm_btn" onClick={(e) => generateFiles()} onMouseOver={(e) => {alert('Please select File Type.')}} disabled={state === 'loading'} > Validate </button>Bueno, cuando su elemento html está disabled (el atributo disabled está configurado), el elemento no activa el evento (por lo tanto, ni ellos (los eventos) burbujean), por lo que el truco podría ser envolver el botón en un lapso (escuchando el evento mouseover y tener un tamaño más grande, por lo que tiene mouseover antes de que el mouse alcance el botón deshabilitado en realidad ...):
<span style={{ display: 'inline-block', padding: 10}} className="button-holder" onMouseOver={(e) => {alert('Please select File Type.')}} > <button type="button" className="frm_btn" onClick={(e) => generateFiles(e)} // onMouseOver={(e) => {alert('Please select File Type.')}} disabled={state === 'loading'} > Validate </button> </span>cuando el botón está desactivado, el mouse no funciona, puede colocar el botón en el otro elemento y disparar onMouseOver en ese elemento, pero tal vez cambie su interfaz de usuario. Sugiero este código:
<button type="button" className="frm_btn" onClick={(e) => state !== 'loading'?generateFiles(e):null} onMouseOver={(e) => state === 'loading'? alert('Please select File Type.'):null} //disabled={state === 'loading'} > Validate </button>