1

我正在包装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 在单击链接时显示链接，但使用路由器实际路由？惯用的方法是什么？

4

1 回答 1

-1

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

于 2016-02-10T21:09:27.700 回答