单选按钮单击事件调用回调 2 次答案

【问题标题】：Radiobutton click event invoking callback 2 times单选按钮单击事件调用回调 2 次
【发布时间】：2022-01-06 14:35:04
【问题描述】：

我有一个单选按钮定义为：

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

所以基本上我的目标是在单击单选按钮时调用回调（props.select），并停止进一步传播（因此 event.stopPropagation）。另外，在更改事件时，我希望不发生默认操作（因此 event.preventDefault）。

但我观察到，当单击单选按钮时，回调（props.select）被调用了 2 次。

我在这里错过了什么？

【问题讨论】：

标签： scala.js scalajs-react

【解决方案1】：

两件事。

首先，因为它是一个副作用，你应该将event.preventDefault() 包装在一个回调中。所以要么Callback(event.preventDefault())，要么你可以使用辅助方法event.preventDefaultCB。

其次，React 喜欢在开发模式下调用两次（这不是 scalajs-react 的事情）。有https://github.com/facebook/react/issues/12856#issuecomment-390206425，还有很多关于 SO 的其他示例。尝试只搜索 React 而不是 scalajs-react。

【讨论】：