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

Posted 2023-03-24

【中文标题】单选按钮单击事件调用回调 2 次

【英文标题】：Radiobutton click event invoking callback 2 times

【发布时间】：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 次。

我在这里错过了什么？

【参考方案1】：

两件事。

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

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