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

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 中的值，它不知道模型中的当前值。您需要使用 "controlled" input 值强制与模型保持同步。

import Html.Attributes exposing (value)

...

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

只要模型发生变化，Elm 虚拟 DOM 就会更新真实 DOM 中的输入，使其具有新值。

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

Elm beginner's question: Html input seems to be preventing model property update

elm

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

Elm beginner's question: Html input seems to be preventing model property update

elm

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