elm - 使用 Elm 并选择

Question

我尝试通过一个自定义示例了解榆木的工作方式。

durationOption duration =
  option [value (toString duration) ] [ text (toString duration)]

view : Model -> Html Msg
view model =
  Html.div []
    [ h2 [] [ text "Month selector"]
    , select []
      (List.map durationOption [1..12])    
    ]

这是一个使用select的简单示例。我想，例如，每次更改月份值时，它都会乘以10。根据文档，没有 onChange或 onSelect这样的事件，我是否必须使用 on创建我的事件？

Answer 1

更新:onInput有效，请参见下面的另一个答案，其中包含0.19工作代码:https://stackoverflow.com/a/41516493/540810

是的，您将需要使用on来处理更改事件。如果查看Elm内置的source for other event handlers(如 onClick )，您会发现它们都是使用on函数构建的。

这是一个使用targetValueIntParse中的elm-community/html-extra将示例中的字符串值转换为int的示例。

更新到Elm-0.18

import Html exposing (..)
import Html.Events exposing (on)
import Html.Attributes exposing (..)
import Json.Decode as Json
import String
import Html.Events.Extra exposing (targetValueIntParse)


main =
    beginnerProgram { model = { duration = 1 }, view = view, update = update }


durationOption duration =
    option [ value (toString duration) ] [ text (toString duration) ]


view : Model -> Html Msg
view model =
    Html.div []
        [ h2 [] [ text "Month selector" ]
        , select [ on "change" (Json.map SetDuration targetValueIntParse) ]
            (List.map durationOption (List.range 1 12))
        , div [] [ text <| "Selected: " ++ (toString model.duration) ]
        ]


type Msg
    = SetDuration Int


type alias Model =
    { duration : Int }


update msg model =
    case msg of
        SetDuration val ->
            { model | duration = val }

您可以在浏览器 https://runelm.io/c/ahz中运行此示例