Elmがカスタム例でどのように機能するかを理解しようとします。
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 で鉱山を作成する必要がありますか?
更新:onInput
は機能します。以下の0.19動作コードを使用した別の回答を参照してください: https://stackoverflow.com/a/41516493/54081
はい、変更イベントを処理するにはon
を使用する必要があります。 他のイベントハンドラーのソースonClick
のようにElmに組み込まれている場合、それらはすべてon
関数。
オプションから文字列値をintに変換するために Elm-community/html-extra から targetValueIntParse を使用している例を次に示します。
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
Elm初心者(私のような)の将来の参考のために:Elm 0.18.0 + Elm-lang/html 2.0.0の場合、onInput
イベント(以下のコードを参照) works 。 (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) ]
Elm 0.19のアップデートは次のとおりです。
module Main exposing (main)
import Browser
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 =
Browser.sandbox { init = { duration = 1 }, view = view, update = update }
durationOption duration =
option [ value (String.fromInt duration) ] [ text (String.fromInt 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: " ++ (String.fromInt model.duration) ]
]
type Msg
= SetDuration Int
type alias Model =
{ duration : Int }
update msg model =
case msg of
SetDuration val ->
{ model | duration = val }
これはElm 0.19.0で Ellie と連携します: https://ellie-app.com/58wGf2YsR9Ya1
完全なコード:
import Browser
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 =
Browser.sandbox { init = init, view = view, update = update }
init =
{ duration = 1 }
durationOption duration =
option [ value (String.fromInt duration) ] [ text (String.fromInt 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: " ++ (String.fromInt model.duration) ]
]
type Msg
= SetDuration Int
type alias Model =
{ duration : Int }
update msg model =
case msg of
SetDuration val ->
{ model | duration = val }
onInput
ハンドラーの例( Ellie も確認できます):
module Main exposing (main)
import Browser import Html exposing (Html, button, div, text, select, option) import Html.Attributes exposing (value, selected) import Html.Events exposing (onInput) import Dict exposing (Dict)
type alias Model =
{ options : Dict Int (String, Bool)
}
initialModel : Model initialModel =
{ options = Dict.fromList [(0, ("All time", False)), (1, ("One week", True)), (2, ("24h", False))]
}
type Msg
= Select String
update : Msg -> Model -> Model update msg model =
case msg of
Select value ->
case String.toInt value of
Just selectedID ->
let
changeSelection id (label, _) =
if id == selectedID then
(label, True)
else
(label, False)
in
{model | options = Dict.map changeSelection model.options}
Nothing ->
model
view : Model -> Html Msg view model =
let
toOption (id, (label, isSelected)) =
option [value (String.fromInt id), selected isSelected] [text label]
in
div []
[ select [onInput Select] (List.map toOption <| Dict.toList model.options)
, div [] [text "DEBUG"]
, div [] [text <| Debug.toString model.options]
]
main : Program () Model Msg main =
Browser.sandbox
{ init = initialModel
, view = view
, update = update
}