0
330
VistasReaccionar: la función onClick no funciona dentro de un flexbox
Cuando hago clic en el botón de búsqueda en el cuadro flexible, espero que la consola registre I am clicked , pero no aparece, lo cual es inesperado.
Aplicación.js
<div className={classes.searchIcon} onClick={() => { console.log("I am clicked"); }} > <SearchIcon /> </div> Caja de arena de código:
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Tiene pointerEvents: none en su CSS, que está deshabilitando el clic. Además, recomendaría usar un button en lugar de un div para fines de accesibilidad (puedes diseñarlo para que se vea como quieras).
const useStyles = makeStyles((theme) => ({ searchIcon: { padding: theme.spacing(0, 1), height: "100%", //pointerEvents: "none", <-- remove this display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", zIndex: 200 } }));El JSX más accesible (con un botón):
<button className={classes.searchIcon} onClick={() => { console.log("I am clicked"); }} > <SearchIcon /> </button>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta