Elm初学者的问题：Html输入似乎阻止了模型属性的更新

我创建了一个简单的Elm程序，它通过Html输入接收输入，当单击submit按钮时，会根据输入值使用更新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
        }

问题是输入在DOM中跟踪自己的值，而不知道模型中的当前值。您需要使用受控输入，强制该值与模型保持同步

import Html.Attributes exposing (value)

...

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

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

问题在于，输入在DOM中跟踪自己的值，而不知道模型中的当前值。您需要使用受控输入，强制该值与模型保持同步

import Html.Attributes exposing (value)

...

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

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