2016-10-17 16 views
5

私は1つのフィールドを持つ単純なフォームを持っています。私はフォーム提出のフィールドをクリアしたいと思います。私は更新機能で私のモデルをクリアしていますが、テキストはテキスト入力のままです。私は更新機能でそれを空にするときmodel.currentSpellingを表示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はクリアしますが、テキスト入力ボックスは、人口のまま。どのようにそれをクリアするための任意のアイデア?

fetchWordはHTTPコールを行いますが、ここでは省略されています。

答えて

10

を 入力要素の属性に追加します。これは、htmlの入力要素の内側にある文字列 を制御する方法です。

+1

fantastic! 'Html.Attributes.value'は必要なものです! – Charlie

+2

'Html.Attributes.value'はバグに悩まされているので、カーソルがフィールドの最後の文字の後ろに置かれていない間に素早く入力すると「ジャンプカーソル」につながることに注意してください。 https://runelm.io/c/wdrのバグをご覧ください。問題のスレッドはこちら:https://github.com/elm-lang/html/issues/105 – A5308Y

+0

currentSpellingの値が更新されるたびにビューが「リフレッシュ」されていることがわかります。これは、currentSpellingが値に「束縛」されていないことを意味します。代わりに、表示されている値は、ビューが更新されているため常に更新されます。 –

関連する問題