从输入设置模型值？

问题描述

我正在尝试使用 Elm 制作待办事项列表，但在弄清楚如何从输入中设置值以将其添加到模型列表时遇到问题：

module TodoList exposing (..)
import browser
import Html exposing (Html,div,text,li,button,ul,input)
import Html.Events exposing (onClick)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)


type alias Model = List String

type Msg =
 NewTask String


init : Model
init = ["Premade Task"]
type alias AddTodo =
    { newTask : String,status: String }

update : Msg -> Model -> Model
update msg model =
    case msg of
        NewTask newContent ->
            model ++ [newContent]

view : Model -> Html Msg
view model =
    div [] [
        input [ placeholder "New Task",value model.content,onInput NewTask ] [],button [ onClick <| (NewTask model.content) ] [text "Add a task"],ul [] (List.map viewTodo model)
      ]
viewTodo todo =
    li [] [text todo]

main =
    browser.sandBox { init = init,update = update,view = view }

我已经尝试将 Model 设为元组，但没有成功，实现这一点的正确方法是什么，我只需要从输入中获取值并将其添加到列表中，当我点击“添加一个任务”按钮。

解决方法

在添加到集合之前，您需要一种方法来临时存储正在键入的待办事项项。在以下示例中，我在 draft 上引入了 Model 字段。我还引入了一种新的消息类型 DraftTask，只要用户输入，它就会被调度。当他们点击按钮时，程序会将 draft 值附加到 todos 列表中。

module ToDoList exposing (..)

import Browser
import Html exposing (Html,button,div,input,li,text,ul)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick,onInput)


type alias Model =
    { todos : List String,draft : String
    }


type Msg
    = NewTask
    | DraftTask String


init : Model
init =
    { todos = [ "Premade Task" ],draft = ""
    }


update : Msg -> Model -> Model
update msg model =
    case msg of
        NewTask ->
            { model
                | todos = model.todos ++ [model.draft],draft = ""
            }

        DraftTask s ->
            { model | draft = s }


view : Model -> Html Msg
view model =
    div []
        [ input [ placeholder "New Task",value model.draft,onInput DraftTask ] [],button [ onClick <| NewTask ] [ text "Add a task" ],ul [] (List.map viewTodo model.todos)
        ]


viewTodo todo =
    li [] [ text todo ]


main =
    Browser.sandbox { init = init,update = update,view = view }