ScalaJS React onClick 处理程序使用路由包装组件答案

【问题标题】：ScalaJS React onClick handler using router for the wrapped componentScalaJS React onClick 处理程序使用路由包装组件
【发布时间】：2016-04-29 20:59:15
【问题描述】：

我正在包装 Bootstrap React 以在 Japgolly ScalaJS React 中使用并提出以下内容：

case class NavItem(
   onClick: UndefOr[js.Function1[ReactEvent, Boolean]] = undefined,
   // ...
) { /* ... create method here */ }

object NavItem {
   def toPage[T](page: T, children: ReactNode*)(implicit ctl: RouterCtl[_ >: T]) = {
     val clickFunction: js.Function1[ReactEvent, Boolean] = { e: ReactEvent =>
       e.preventDefault()
       ctl.set(page).runNow()
       true
     }

     NavItem(
       key = page.toString,
       href = ctl.pathFor(page).value,
       onClick = clickFunction
     ).create(
       children
     )
   }
}

这可行，但我觉得比它可能的要复杂。

我的第一个想法是改用 onClick : UndefOr[ReactEvent => Callback]，这似乎更符合 japgolly ScalaJS React 通常的方法，所以我尝试了：

val clickEvent: ReactEvent => Callback = e => {
  e.preventDefault()
  ctl.set(page)
}

这会编译，但即使调试显示调用了回调，页面也不会切换。为什么在这种情况下页面从不切换？

有关如何正确执行 NavItem 的任何建议，该 NavItem 在单击链接时显示链接，但使用路由器实际路由？什么是惯用方式？

【问题讨论】：

标签： scala.js scalajs-react

【解决方案1】：

您不需要 onClick 处理程序 - 只需将其删除，它就会按预期工作。用 router.pathFor 填充的 href 足以用于路由。

【讨论】：

不，它没有按预期工作。然后它会刷新整个页面。