es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Evento de clic en botón de opción invocando el retroceso 2 veces.

11 Jun, 2023 Programación

Tengo un botón de radio definido como:

<.label(
        ....estilos
        ^.onClick ==> { event =>
          event.stopPropagation()
          props.select
        },
        <.input.radio(
          ....estilos
          ^.onChange ==> { event =>
            event.preventDefault()
            Callback.empty
          },
          ^.checked := props.isActive,
          ^.disabled := props.disabled
        )
      )

Básicamente, mi objetivo es invocar una devolución de llamada(props.select) al hacer clic en el botón de radio y detener la propagación adicional(por lo tanto, event.stopPropagation). Además, en el evento de cambio, no quiero que se produzca la operación predeterminada(por lo tanto, event.preventDefault).

Pero observo que se invoca la devolución de llamada(props.select) 2 veces cuando se hace clic en el botón de radio.

¿Qué me falta aquí?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Es posible que el evento esté siendo capturado por tanto los elementos label como input, haciendo que la función de devolución de llamada sea llamada dos veces. Para evitar esto, puede eliminar el evento onClick del label y, en su lugar, adjuntarlo directamente al elemento input. De esta manera, el evento solo se desencadenará una vez cuando se haga clic en el botón de radio.

    Aquí hay un fragmento de código actualizado:

      ^.onClick ==> { e =>
    e.stopPropagation()
  },
  ^.for := props.id,
  <.input.radio(
       ....estilo
    ^.id := props.id,
    ^.onChange ==> { e =>
      e.preventDefault()
      props.select()
    },
    ^.checked := props.isActive,
    ^.disabled := props.disabled
  )

    Además, tenga en cuenta que el evento onChange debe activar la función de devolución de llamada, no solo devolverla. Por lo tanto, el código correcto debería ser:

    props.select()

    en lugar de:

    props.select

Comments are closed.