#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/1053. Мне потребовалось некоторое время, чтобы понять, что представление «обновляется» каждый раз, когда будет обновляться значение currentSpelling . Это означает, что currentSpelling не «привязан» к значению, вместо этого отображаемое значение постоянно обновляется, поскольку обновляется представление.