web-dev-qa-db-fra.com

Travaillez avec Elm et sélectionnez

J'essaie de comprendre comment Elm fonctionne avec un exemple personnalisé.

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])    
    ]

C'est un exemple facile à utiliser avec une sélection. J'aimerais que chaque fois que je change la valeur du mois, il se multiplie par 10, par exemple. Selon la documentation, il n'y a pas d'événements tels que onChange ou onSelect, dois-je créer le mien avec sur ?

elm
18
billyJoe

UPDATE: onInput fonctionne, voir une autre réponse ci-dessous avec 0,19 code de travail: https://stackoverflow.com/a/41516493/540810

Oui, vous devrez utiliser on pour gérer l'événement de modification. Si vous regardez le source pour d'autres gestionnaires d'événements intégrés à Elm, comme onClick , vous verrez qu'ils sont tous construits à l'aide de la fonction on.

Voici un exemple qui utilise targetValueIntParse from Elm-community/html-extra pour transformer la valeur de chaîne de l'option en un int.

Mis à jour à 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 }

Vous pouvez exécuter cet exemple dans le navigateur https://runelm.io/c/ahz

22
Chad Gilbert

Pour référence future pour les débutants Elm (comme moi): avec Elm 0.18.0 + Elm-lang/html 2.0.0, l’événement onInput (voir le code ci-dessous) works . (Notez également la différence dans la notation int range (List.range 0 12 au lieu de [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) ]
32
Ferenc Dósa-Rácz

Voici une mise à jour pour 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 }
1
Sergey Zubtsovskiy