在 Elm 中用 select 更改记录值

Question

我尝试做一件简单的事情，但我很难理解如何编码。假设这条记录

type alias Model =
  { month : Int
  , cost : Int
  , email : String
  }

我有两种方法可以使用这个模型： - 在这个例子中，要么用户改变月份，要么动态改变成本（成本=月* 10） - 或用户提交并以 json 格式

将数据发送到服务器

我的观点是这样的：

durationOption duration =
  option [value (toString duration) ] [ text (toString duration)]

view model =
  Html.div []
    [ 
    , input [ placeholder "my@email.com" ] []
    , select []
      (List.map durationOption [0..12]) -- month selector
    , Html.span [][text (toString model.total)] -- value automatically updated when users changes month value in the select
    , button [ onClick Submit ] [text "Send"]
    ]

不幸的是，我不明白如何更新值，如何只更新成本：

update : Msg -> Model -> (Model, Cmd Msg)
update action model =
  case action of
    Submit ->
      (model, Cmd.none)
    {-
    Calculate ->
       ???? 
    -}

我想我必须调用Calculate，但我真的不知道该怎么做。我已经阅读了文档中的示例，但是 select 没有任何内容...... 有谁可以帮助我吗？

Answer 1

与一样，您必须处理下拉列表中的 change 事件才能收到更改通知。

首先让我们定义一个消息，我们可以使用它来更改月份下拉列表。

更新到 Elm-0.18

type Msg
  = Submit
  | MonthChanged Int

然后我们需要将 MonthChanged 合并到 on 事件处理程序中。这是用 Json 解码器完成的，但是你需要一个 Json 解码器将选项中的字符串值转换为整数，所以让我们使用 targetValueIntParse from elm-community/html-extra 来定义 on "change" 处理程序。您的 select 代码如下所示：

select [ on "change" (Json.map MonthChanged targetValueIntParse) ]

最后，您的 update 函数需要在模型中设置 month 和 cost 值。您可以通过将以下内容添加到您的案例陈述中来做到这一点：

MonthChanged month ->
  ({ model | month = month, cost = month * 10 }, Cmd.none)

我已经发布了一个工作示例 https://runelm.io/c/h2k，您可以在浏览器中运行

在 Elm 中用 select 更改记录值

Change a record value with a select in Elm

elm