Forms 如何在Elm中提交表格？

这是一个非常基本的问题，但我没有找到任何例子
我有这样的看法：

view address model =
  div []
    [ div [] [ text <|"ID : " ++ toString model.id ]
    , form
        []
        [ input [ value model.title ] []
        , textarea [ value model.content ] []
        , button [ onClick address ( SubmitPost model ) ] [ text "Submit" ] // Here is the issue, I want to send my updated model
        ]
    ]

查看地址模型=
分区[]
[div[][text在Elm中处理表单的标准方法是在表单发生任何更改时触发对模型的更新。通常会在每个表单元素上附加某种类型的
事件属性

例如，您需要在“输入”
上使用
来触发事件，以使用最新的值更新您的模型。但在此之前，我们需要创建一些操作来响应来自任一字段的更新

类型动作
=SubmitPost
|更新字符串
|更新内容字符串

我擅自将您的
SubmitPost模型
操作更改为just
SubmitPost
。由于我们将您的代码更改为始终最新，因此您不需要操作
SubmitPost
以外的任何操作来触发进行提交的事件

现在您有了额外的操作，您需要在
update
函数中处理它们：

更新动作模型=
案例诉讼
UpdateTitle s->
（{model | title=s}，Effects.none）
更新内容s->
（{model | content=s}，Effects.none）
...

现在，我们可以将
on
属性添加到文本字段中，以便在任何内容发生更改时触发更新。
“input”
是浏览器在文本内容发生更改时触发的事件，它为您提供了比仅仅观察
按键
事件更多的内容

查看地址模型=
分区[]
elm-0.18的[div[][text，基于

将下面的文件另存为Main.elm

模块主显示（主）
导入Html（Html、div、文本、表单、文本区域、按钮、输入）
导入Html.Attributes（类型、操作、值、禁用）
导入Html.Events（onSubmit、onInput）
导入Http
导入Json。解码为Json
导入Json.Encode
类型别名模型=
{新来者：新来者
，注释：列出注释
}
emptyModel:模型
空模型=
{newComment=emptyNewComment
，评论=[]
}
emptyNewComment=
新成员-1“
类型别名新出现=
{userId:Int
，标题：字符串
，正文：String
}
输入味精
=添加注释
|更新提示新信息
|AddCommentHttp（结果Http.Error注释）
更新：Msg->Model->（Model，Cmd-Msg）
更新msg模型=
味精案例
添加评论->
让
新来者=
Debug.log“model.newComment”model.newComment
在里面
（{model | newComment=emptyNewComment}，post comment newComment）
更新推荐新成员->
（{model | newComment=newComment}，Cmd.none）
AddCommentHttp（确定响应）->
让
_ =
Debug.log“response”响应
在里面
（{model | comments=model.comments++[response]}，Cmd.none）
AddCommentHttp（Err-Err）->
让
_ =
Debug.log“err”err
在里面
（型号，Cmd.none）
后现代=
Http.send AddCommentHttp
（Http.post）https://jsonplaceholder.typicode.com/posts"
（新来者新来者）
解码评论
)
encodeNewComment:NewComment->Http.Body
新来者新来者=
Http.jsonBody Html Msg
视图模型=
div[]div[]文本（新成员->消息）->消息->Html消息
viewForm newComment toUpdateComment addComment=
形式
[onSubmit addComment，操作“javascript:void（0）；”]
[部门[]
[输入
[value newComment.title]
，onInput（\v->toUpdateComment{newComment | title=v}）
]
[]
]
，文本区
[value.body]
，onInput（\v->toUpdateComment{newComment|body=v}）
]
[]
，分区[]
[按钮
[键入“提交”
，残疾人士
空空如也=
String.isEmpty Sub.none
，init=（emptyModel，Cmd.none）
}

并运行：

elm包安装-y elm lang/http
elm反应堆

在web浏览器中打开这是我发现的在Elm（0.18）中定义HTML表单的“最新”方式，如下所示。请注意，它与表单标记的onSubmit属性挂钩，而不是单击特定按钮

view : Model -> Html Msg
view model =
    Html.form
        [ class "my-form"
        , onWithOptions
            "submit"
            { preventDefault = True, stopPropagation = False }
            (Json.Decode.succeed SubmitPost)
        ]
        [ button []
            [ text "Submit"
            ]
        ]

@BoumTAC这不是“黑客”，这就是您在Elm中的编码方式。@halfzebra我理解，但我也理解我们是在2016年而不是2005年。我也理解，如果像这样，人们永远不会使用Elmthis@BoumTACstackoverflow是一个人们来查看或询问各种复杂问题答案的地方。当然，欢迎您发表意见，但这不是平台这些事情的形式，以及像你这样的评论可能会导致知识不那么渊博的人跟随你。halfzebra对此做出了正确的评论，认为这不是“黑客行为”，听起来你的挫折感已经战胜了你。Elm采取了不同的思维方式，但与双向bindi相比，它确实是一种有价值的数据流推理方式ng.等等。@BoumTAC有趣的是，2017年最流行的javascript状态管理库redux是从Elm获得的。Elm体系结构工作的约束引导您朝着一个方向前进，使您可以轻松构建可扩展/可维护的应用程序，可能会以寻找简单的表单绑定为代价。数据绑定无论如何都被高估了。在编写显式处理程序时获得的控制和概念一致性以及无需重新学习每个新UI工具包的所有内容，这非常值得花几分钟在样板文件上。非常好！但我花了一些时间才弄明白
onInput中的“标题”