Question

我不确定这是否可行，但是我试图触发具有链接联合类型的html事件。我有以下两种联合类型：

type DialogOf =
    SearchItems
    | SearchingItems String
    | None

type Msg = 
    Start
    | ShowDialog DialogOf
    | CancelDialog

我按如下方式处理模型更新，效果很好。

        ShowDialog dialogOf ->
            case dialogOf of
                SearchItems ->
                    ( { model | dialogOf = SearchItems }, Cmd.none)
                SearchingItems filter -> 
                    ( {model | context = CurrentContext filter }, Cmd.none )
                None -> (model ,Cmd.none)

现在，当我触发事件时，我想使用过滤器（字符串）来触发SearchingItems，这可以使用onClick按钮实现：

let searchWordButton item = 
    div [] [ 
        button [ onClick (ShowDialog (SearchingItems item))] [text item]
    ]

现在，我想触发文本框的onInput来过滤文本输入，但是我找不到任何方法来隐式传递值-我正在尝试执行以下操作（不起作用）：

div [] [ input [ 
    value model.context.filter, onInput (ShowDialog SearchingItems) ] [] 
]

我意识到可能还有其他更好的方法来处理此问题（例如sub modules），但是我想知道是否存在一种使用链联合类型将onInput事件隐式传递字符串值的方法。以上？

谢谢

Answer 1

由于ShowDialogue是

类型，因此无法使用

(DialogueOf -> Msg)

但是onInput期望一个类型为

的参数

(String -> Msg)

换句话说，onInput将字符串传递给消息（ShowDialogue），而不传递给构造函数SearchingItems。

我不相信有一种方法可以直接访问字符串（然后可以将其直接传递给SearchingItems）。如果您想更深入地了解，可以考虑使用on（http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Events#on）来创建自定义事件侦听器，但我认为它不会起作用，这似乎有些过头了。

最好有两种不同的消息来捕获不同的用途：

type Msg 
    = Start
    | ShowDialog DialogOf
    | ShowDialogWithString String
    | CancelDialog

更新功能：

    ShowDialog dialogOf ->
        ( { model | dialogOf = SearchItems }, Cmd.none)

    ShowDialogWithString filter -> 
        ( {model | context = CurrentContext filter }, Cmd.none )

查看

div [] 
    [ input 
        [ value model.context.filter, onInput ShowDialogWithString ] [] 
    ]

榆木中的html事件的链联合类型

1 个答案: