与榆树合作并选择

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,我必须用我的创作上？

Answer 1

对于Elm-newbies(像我一样)的未来参考:使用Elm 0.18.0 + elm-lang/html 2.0.0,该onInput事件(见下面的代码)有效.(另请注意int范围表示法的差异(List.range 0 12而不是[0..12]).

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)


main =
  Html.beginnerProgram
    { model = model
    , view = view
    , update = update
    }



-- MODEL


type alias Model =
  { duration : Int
  }


model : Model
model =
  Model 0



-- UPDATE


type Msg
    = SetDuration String


update : Msg -> Model -> Model
update msg model =
  case msg of
    SetDuration s ->
      let result =
        String.toInt s
      in
        case result of
          Ok v ->
            { model | duration = v }

          Err message ->
            model


-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ select [ onInput SetDuration ]
             (List.range 0 12 |> List.map intToOption)
    , div [] [ text <| "Selected: " ++ (toString model.duration) ]         
    ]


intToOption : Int -> Html Msg
intToOption v =
  option [ value (toString v) ] [ text (toString v) ]

Answer 2

更新:onInput工作,请参阅下面的另一个答案0.19工作代码:https://stackoverflow.com/a/41516493/540810

是的,您需要使用它on来处理更改事件.如果你看一下Elm中内置的其他事件处理程序的源代码onClick,你会发现它们都是使用该on函数构建的.

这是一个使用来自elm-community/html-extra的targetValueIntParse的示例,用于将字符串值从选项转换为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中运行此示例