forms - 如何在 Elm 中提交表单？

Question

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

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
        ]
    ]

所以它显示一个包含内容的表单。
因此，如果我在 input 和 textarea 中写入以更新内容，我如何在 onClick 上“捕获”我更新的模型按钮上的事件发送吗？

Answer 1

在 Elm 中处理表单的标准方法是在表单发生任何变化时触发对模型的更新。您通常会看到某种 on附加到每个表单元素的事件属性。

对于您的示例，您需要使用 on "input"触发使用最新值更新模型的事件。但在我们这样做之前，我们需要创建一些响应来自任一字段的更新的操作。

type Action
  = SubmitPost
  | UpdateTitle String
  | UpdateContent String

我冒昧换了你的 SubmitPost Model行动只是 SubmitPost .由于我们正在将您的代码更改为始终保持最新状态，因此除了操作 SubmitPost 之外，您不需要任何其他操作。触发执行提交的事件。

现在您有了额外的操作，您需要在 update 中处理它们。功能:

update action model =
  case action of
    UpdateTitle s -> 
      ({ model | title = s }, Effects.none)
    UpdateContent s -> 
      ({ model | content = s }, Effects.none)
    ...

我们现在可以添加 on属性到您的文本字段以在任何更改时触发更新。 "input"是当文本内容更改时浏览器将触发的事件，它为您提供更多的覆盖范围，而不仅仅是观看 keypress 之类的内容。事件。

view address model =
  div []
    [ div [] [ text <| "ID : " ++ toString model.id ]
    , form
      []
      [ input
        [ value model.title
        , on "input" targetValue (Signal.message address << UpdateTitle)
        ]
        []
      , textarea
        [ value model.content
        , on "input" targetValue (Signal.message address << UpdateContent)
        ]
        []
      , button [ onClick address SubmitPost ] [ text "Submit" ]
      ]
    ]

targetValue解码器是一个 Json 解码器，它检查被触发的 javascript 事件，深入到 event.target.value javascript 对象内的字段，其中包含文本字段的完整值。