Question

我创建了一个简单的Elm程序，该程序通过HTML输入接受输入，并且当单击“提交”按钮时，会根据输入值更新HTML文本。

此外，还有一个重置按钮，可将模型重置为其初始值。

我发现的是，当单击重置时，HTML文本将重置为其初始值，而html输入则没有。

我在这里想念什么？

module Main exposing (main)

import Browser
import Html exposing (Html, button, div, text, input)
import Html.Events exposing (onClick, onInput)

type alias Model =
    { name : String,
      message : String
    }

initialModel : Model
    initialModel =
    { name = "",
      message = "" }

type Msg
    = SubmitName
    | ResetName
    | UpdateName String

update : Msg -> Model -> Model
update msg model =
    case msg of
        UpdateName text -> 
            { model | name = text }

        SubmitName ->
            { model | 
            message = 
               if model.name =="Dugald McDougall" then 
                   "What a great name!"
               else 
                   "Meh..."
            }

       ResetName ->
           initialModel

view : Model -> Html Msg
view model =
    div []
        [ input [ onInput UpdateName ] []
        , div [] [ button [ onClick SubmitName ] [ text "Submit" ]
        , button [ onClick ResetName ] [ text "Reset" ] 
        , div[] [ text <| model.message ] ]
        ]

main : Program () Model Msg
main =
    Browser.sandbox
        { init = initialModel
         , view = view
         , update = update
        }

Answer 1

问题是input在DOM中跟踪其自身的值，并且不知道模型中的当前值。您需要使用“受控的” input，其中该值被迫与模型保持同步。

import Html.Attributes exposing (value)

...

input [ onInput UpdateName, value model.name ] []

每当模型更改时，Elm虚拟DOM就会更新真实DOM中的输入，以使其具有新值。

榆木初学者的问题：HTML输入似乎阻止模型属性更新

1 个答案: