elmeng ui dropdown 点击莫一个值 如何 传递两个参数 其中一个参数是表单中携带的参数
时间: 2023-10-09 21:10:11 浏览: 70
Pixel Art GUI UI Kit - over 400 PNG 151 icons 1.1
可以使用 Elm 的 `Html.Events.onWithOptions` 函数来绑定一个点击事件处理函数,然后在处理函数中将需要传递的两个参数都打包成一个自定义类型并作为消息发送给 Elm 的更新函数。具体实现可以参考以下代码:
```elm
import Html exposing (Html, div, text)
import Html.Events exposing (onWithOptions, Options(..), targetValue)
type alias MyDropdownValue =
{ dropdownValue : String
, formParam : String
}
type Msg
= DropdownClicked MyDropdownValue
dropdown : List String -> String -> Html Msg
dropdown items formParam =
let
onSelect item =
DropdownClicked { dropdownValue = item, formParam = formParam }
in
-- 使用 Html.Events.onWithOptions 函数绑定点击事件处理函数
div [ onWithOptions "click"
{ stopPropagation = False
, preventDefault = False
, targetValue = (\_ -> "")
}
(Json.Decode.map onSelect targetValue)
] [ text "Dropdown" ]
update : Msg -> model -> (model, Cmd Msg)
update msg model =
case msg of
DropdownClicked value ->
-- 在这里处理收到的消息
(model, Cmd.none)
-- 其他消息处理省略
```
上面的代码中,我们定义了一个自定义类型 `MyDropdownValue` 来打包需要传递的两个参数 `dropdownValue` 和 `formParam`。在 `dropdown` 函数中,我们使用 `Html.Events.onWithOptions` 函数绑定了一个点击事件处理函数 `onSelect`,该函数会将选中的值和表单参数组合成 `MyDropdownValue` 类型的值,并作为 `DropdownClicked` 消息发送给 Elm 的更新函数。需要注意的是,我们使用了 `Options` 类型的实例来配置 `onWithOptions` 函数,其中包括了 `targetValue` 属性,该属性会将触发事件的元素的值设置为空字符串,以避免在处理函数中获取到错误的值。在更新函数中,我们可以根据收到的消息进行相应的处理。
阅读全文