Tengo un elemento de encabezado:
<h2>☶ Today's Bills</h2> Quiero que el ícono ☶ (☶) tenga una función onClick, pero sin asignarle una etiqueta para que permanezca como en la etiqueta <h2> .
Mi enfoque fue este
<h2> <onClick={somfunc}> ☶ </> Today's Bills</h2> // doesn't work Entonces, ¿hay alguna manera de hacerlo? Y si no, ¿hay alguna manera de dar a esta parte de la etiqueta <h2> el onClick?
No quiero convertirlo en 2 elementos de etiqueta y escribir css para alinearlos, ya que esto probablemente romperá algo más. Soy relativamente nuevo, así que no tener que hacerlo sería mejor.
eso no funcionará, use un elemento (como span)
Editar: este JSX debe convertirse en HTML y debe vincular el evento al elemento real.
Esto se puede hacer mediante CSS sin insertar otro elemento.
Si no desea insertar un elemento adicional en el HTML, puede usar un pseudo antes del elemento.
Esto puede contener el carácter especial y tener eventos de puntero configurados en automático, mientras que el elemento h real no tiene eventos de puntero configurados.
h2 { pointer-events: none; } h2::before { content: "\2636"; pointer-events: auto; } <h2 onclick="alert('I have seen a click');">Today's Bills</h2>[Probado solo en Edge/Chrome hasta ahora]
Sin embargo, puede haber problemas de accesibilidad en el sentido de que no estoy seguro de que todos los lectores de pantalla anuncien ese carácter especial, por lo que alguien que use un software especial puede pasar por alto la posibilidad de hacer clic en él.