如何将 onClick 事件中的值映射到 Elm 中的操作？

Question

我正在试验一个 Elm 应用程序，我希望在 div 内通过点击生成操作，但我希望操作包含点击的坐标。

我可以看到我可以通过这样的点击生成操作：

div [onClick address MyAction] [text "click in here"]

但我看不到如何将映射函数应用于原始点击数据以填充 MyAction 中的字段

Answer 1

您可以使用 Json 解码器从 javascript 事件对象中提取不同的属性。要将 clientX 和 clientY 值作为元组获取，您可以创建以下解码器：

import Json.Decode as Json exposing ((:=))

eventPos : Json.Decoder (Int, Int)
eventPos =
  Json.object2
    (,)
    ("clientX" := Json.int)
    ("clientY" := Json.int)

为了对这些值执行某些操作，您需要添加一个可以接受元组作为参数的操作：

type Action
  = MyAction
  | DivClicked (Int, Int)

最后，不是使用 onClick 函数在 div 上生成事件处理程序属性，而是需要使用 on 函数，传入 Json解码器：

on "click" eventPos (Signal.message address << DivClicked)

这是一个包含 working example that you can paste right into http://elm-lang.org/try.

的要点

如何将 onClick 事件中的值映射到 Elm 中的操作？

How can I map values out of an onClick event into an action in Elm?

elm