榆树:提交时的清晰表格

Cha*_*lie 6 elm

我有一个简单的表格,有一个字段.我想在表单提交上清除该字段.我正在更新函数中清除我的模型,但文本仍保留在文本输入中.

type alias Model =
    { currentSpelling : String }

type Msg
    = MorePlease

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        MorePlease ->
            (  log "cleared spelling: " { model | currentSpelling = "" }
                , fetchWord model.currentSpelling )

view : Model -> Html Msg
view model =
    div []
        [ Html.form [ onSubmit MorePlease ]
            [ input [ type' "text"
                    , placeholder "Search for your word here"
                    , onInput NewSpelling
                    , attribute "autofocus" ""
                    ] []
            , text model.currentSpelling
            , input [ type' "submit" ] [ text "submit!" ]
            ]
        ]
Run Code Online (Sandbox Code Playgroud)

当我使用更新功能清空时,text显示model.currentSpelling清除,但文本输入框仍然填充.知道如何清除它吗?

fetchWord 进行HTTP调用,但这里省略了.

Tos*_*osh 11

添加value model.currentSpelling到input元素的Attributes中.这就是你如何控制html中输入元素内部的字符串.

  • 请注意,`Html.Attributes.value`会遇到错误,当光标未定位在字段中的最后一个字符之后快速键入时会导致"跳跃光标".请参阅此处的错误操作:https://runelm.io/c/wdr以及有关此问题的主题:https://github.com/elm-lang/html/issues/105 (2认同)