Hola, estoy usando React, seleccione el componente personalizado y en la opción desplegable estoy agregando 2 íconos, y quiero agregar el evento onClick en eso, el problema es cuando hago clic en el ícono, el onClick predeterminado también se llama y la acción predeterminada también se ejecuta en el fondo.
export const SvdSrchSelectOpt = (props : any) => { return ( <components.Option {...props} > <Styld.Div > <div className="flex-auto w-full">{props.label}</div> <div className="container flex ml-auto justify-end"> <Button variant='noBorder' onClick={props.onEdit} icon="writing-editing" className='max-w-35p justify-items-center'> </Button> <Button variant='noBorder' onClick={props.onDelete} icon="TrashMessaging" className='max-w-35p justify-items-center'> </Button> </div> </Styld.Div> </components.Option > ); };quiero que si el usuario haga clic en la etiqueta, luego haga clic en el botón predeterminado para ejecutar, pero si el usuario hace clic en cualquiera de estos íconos, entonces el botón Onclick del ícono se ejecuta. por favor ayudenme en esto gracias de antemano
La forma más fácil es usar event.stopPropagation dentro de las funciones de los iconos. Entonces algo como:
function onEdit(event) => { event.stopPropagation(); ...Pero esto significa que no podrá capturar el clic en ningún otro lugar (por ejemplo, es posible que tenga un selector abierto que desee cerrar cuando se haga clic en la página o algo similar). Otra solución bastante fácil (y la opción que recomendaría personalmente) sería reemplazar e.stopPropagation() con e.preventDefault() + e.defaultPrevented
Entonces, básicamente, debe agregar funciones de íconos internos:
function onEdit(event) => { event.preventDefault(); ...y el onClick predeterminado debería tener la condición. Algo como:
function onClick(event) => { if(event.defaultPrevented) return }También puedes ver más sobre este tema aquí