Блог

Главная - Вопросы по программированию - Elm: очистить форму при отправке

Elm: очистить форму при отправке

#elm

#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!" ]
            ]
        ]

text Отображение model.currentSpelling очищается, когда я очищаю его с помощью функции обновления, но поле ввода текста остается заполненным. Есть идеи, как ее очистить?

fetchWord выполняет HTTP-вызов, но здесь он опущен.

Ответ №1:

добавить value model.currentSpelling в атрибуты входного элемента. Вот как вы можете управлять строкой внутри элемента ввода в html.

Комментарии:

1. фантастика! Html.Attributes.value это именно то, что мне было нужно!

2. Имейте в виду, что Html.Attributes.value она страдает от ошибки, которая приводит к «скачущему курсору» при быстром наборе текста, когда курсор не установлен после последнего символа в поле. Смотрите ошибку в действии здесь: runelm.io/c/wdr и тема об этой проблеме здесь: github.com/elm-lang/html/issues/105

3. Мне потребовалось некоторое время, чтобы понять, что представление «обновляется» каждый раз, когда будет обновляться значение currentSpelling . Это означает, что currentSpelling не «привязан» к значению, вместо этого отображаемое значение постоянно обновляется, поскольку обновляется представление.