elmeng ui dropdown 点击莫一个值 如何 传递两个参数 有一个参数是 列表中携带的参数
时间: 2024-02-12 12:05:14 浏览: 100
Pixel Art GUI UI Kit - over 400 PNG 151 icons 1.1
可以考虑使用 Elm 的 `Html.Events.onClick` 函数来绑定一个点击事件处理函数,然后在处理函数中将需要传递的两个参数都打包成一个自定义类型并作为消息发送给 Elm 的更新函数。具体实现可以参考以下代码:
```elm
import Html exposing (Html, div, text)
import Html.Events exposing (onClick)
type alias MyDropdownValue =
{ dropdownValue : String
, extraParam : Int
}
type Msg
= DropdownClicked MyDropdownValue
dropdown : List String -> Int -> Html Msg
dropdown items extra =
let
onSelect item =
DropdownClicked { dropdownValue = item, extraParam = extra }
in
-- 使用 Html.Events.onClick 函数绑定点击事件处理函数
div [ onClick <| onSelect "selectedItem" ] [ text "Dropdown" ]
update : Msg -> model -> (model, Cmd Msg)
update msg model =
case msg of
DropdownClicked value ->
-- 在这里处理收到的消息
(model, Cmd.none)
-- 其他消息处理省略
```
上面的代码中,我们定义了一个自定义类型 `MyDropdownValue` 来打包需要传递的两个参数 `dropdownValue` 和 `extraParam`。在 `dropdown` 函数中,我们使用 `Html.Events.onClick` 函数绑定了一个点击事件处理函数 `onSelect`,该函数会将选中的值和额外参数组合成 `MyDropdownValue` 类型的值,并作为 `DropdownClicked` 消息发送给 Elm 的更新函数。在更新函数中,我们可以根据收到的消息进行相应的处理。
阅读全文