Question

我在Elm reactor（0.18）中运行以下代码，然后点击＆＃34; Switch＆＃34;按钮，标签正确重新排序，但框中输入的文本没有。调试器显示模型中的值是正确的，但看起来好像只有部分DOM正在更新。我做错了什么？

（注意：这似乎发生在Ubuntu 16.04上的Firefox 52.0.2和Chrome 57.0.2987.11中）

module App exposing (..)

import Html exposing (..)
import Html.Events exposing (onInput, onClick)


type Position
    = First
    | Second


type alias Model =
    { value1 : String, value2 : String, order : List Position }


type Msg
    = SwitchOrder
    | SetFirst String
    | SetSecond String


init : ( Model, Cmd Msg )
init =
    ( { value1 = "", value2 = "", order = [ First, Second ] }, Cmd.none )


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        SwitchOrder ->
            ( { model | order = List.reverse model.order }, Cmd.none )

        SetFirst new_value ->
            ( { model | value1 = new_value }, Cmd.none )

        SetSecond new_value ->
            ( { model | value2 = new_value }, Cmd.none )


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none


labeledInput : Model -> Position -> Html Msg
labeledInput model position =
    case position of
        First ->
            div []
                [ label [] [ text "First" ]
                , input [ onInput SetFirst ] [ text model.value1 ]
                ]

        Second ->
            div []
                [ label [] [ text "Second" ]
                , input [ onInput SetSecond ] [ text model.value2 ]
                ]


view : Model -> Html Msg
view model =
    div []
        [ List.map (labeledInput model) model.order |> div []
        , button [ onClick SwitchOrder ] [ text "Switch" ]
        ]


main : Program Never Model Msg
main =
    program
        { init = init
        , update = update
        , subscriptions = subscriptions
        , view = view
        }

Answer 1

设置输入值[{3}}而不是text

的值

import Html.Attributes exposing (value)

...

First ->
    div []
        [ label [] [ text "First" ]
        , input [ onInput SetFirst, value model.value1 ] []
        ]

如何在重新排序Elm更新中的项目时获取要更新的输入值

1 个答案: