如何在Elm中提交表单？ [英] How to submit a form in Elm?

问题描述

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

我有这样的看法：

 查看地址模型= 
 div [] 
 [div [] [text< |ID：++ toString model.id] 
，form 
 [] 
 [input [value model.title] [] 
，textarea [value model.content] [] 
，button [onClick address（SubmitPost model）] [textSubmit] //这是问题，我想发送我更新的模型
] 
] 
  

所以它显示一个带有里面内容的表单。

因此，如果我在输入和textarea中编写内容以更新内容，如何在按钮上的 onClick 事件上捕获我的更新模型以发送它？

解决方案

在Elm中处理表单的标准方法是每当 发生更改时触发对模型的更新在窗体上。您通常会在附加到每个表单元素的事件属性上看到某种类型的。





对于您的示例，我们希望在input上使用来触发使用最新值更新模型的事件。但是，在我们做到这一点之前，我们需要创建一些响应任何字段更新的动作。

c $ c>类型动作
= SubmitPost
| UpdateTitle字符串
| UpdateContent字符串


我冒昧地改变你的 SubmitPost模型行动只是 SubmitPost 。由于我们将代码更改为始终保持最新状态，因此除了 SubmitPost 操作外，您不需要任何操作来触发提交的事件。

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

$
$ b

update action model =

UpdateTitle s - >
（{model | title = s}，Effects.none）
UpdateContent s - >
（{model | content = s}，Effects.none）
...


现在，我们可以将属性添加到您的文本字段上，以在任何更改时触发更新。 input是浏览器在文本内容发生变化时会触发的事件，并且它会给予您更多的报道，而不仅仅是观看 keypress events。

 查看地址模型= 
 div [] 
 [div [] [text< | ID：++ toString model.id] 
，form 
 [] 
 [input 
 [value model.title 
，oninputtargetValue（Signal .message address<<<<<<<<<<<<<> b> b> 
 [] 
，textarea 
 [value.model.content 
，oninputtargetValue（Signal.message address按钮[onClick地址SubmitPost] [文本提交] 
] 
] 
， code> 

targetValue 解码器是一个Json解码器，用于检查javascript事件在JavaScript对象内部钻取到 event.target.value 字段，其中包含文本字段的全部值。

It's a really basic question but I didn't find any example.
I have a view like this :

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

So it display a form with the content inside.
So if I write in my input and textarea to update the content, how do I "catch" my updated model on the onClick event on the button to send it?

解决方案

The standard way to handle forms in Elm is to trigger updates to your model whenever anything changes on the form. You will typically see some kind of on event attribute attached to each form element.

For your example, you'll want to use on "input" to fire events that update your model with the latest value. But before we can do that, we'll need to create some actions that respond to updates from either field.

type Action
  = SubmitPost
  | UpdateTitle String
  | UpdateContent String

I took the liberty of changing your SubmitPost Model action to just SubmitPost. Since we're changing your code to always be up to date, you don't need anything other than the action SubmitPost to trigger an event that does the submission.

Now that you have the additional actions, you'll need to handle them in the update function:

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

We can now add the on attributes onto your text fields to trigger updates whenever anything changes. "input" is the event that browsers will fire when text content changes, and it gives you more coverage than just watching for something like keypress events.

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

The targetValue decoder is a Json Decoder which inspects the javascript event that was fired, drilling down to the event.target.value field inside the javascript object, which contains the full value of the text field.

这篇关于如何在Elm中提交表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！