scala.js - 单选按钮单击事件调用回调 2 次

Question

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

<.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）。

但是我观察到单击单选按钮时会调用 2 次回调（props.select）。

我在这里想念什么？

Answer 1

两件事情。

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

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