单选按钮点击事件调用回调 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）。

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

我在这里错过了什么？

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。

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

Radiobutton click event invoking callback 2 times

scala.js

scalajs-react