在Fable-Elmish中如何处理自定义元素的自定义事件？

你找对方向了！Fable-Elmish（底层依赖Fable.React）确实支持自定义事件，只是和Elm的API写法有一点点差异，我来帮你补上最后那一步。

直接对应Elm的写法：使用on函数重载 #

其实Fable.React里的on函数和Elm的on作用几乎一致，你只需要确保引用了正确的命名空间，代码可以直接修改成这样：

open Fable.React
open Fable.React.Props
open Thoth.Json.Decode

let onSlide (toMsg: int -> Msg) =
    Decode.at ["detail"; "userSlidTo"] Decode.int
    |> Decode.map toMsg
    |> on "slide"

是不是和你Elm里的简化版写法几乎一模一样？这里的on函数来自Fable.React.Props，它支持接收自定义事件名，配合解码器完成事件到Msg的映射。

更灵活的方式：使用Event.custom #

如果需要对事件行为进行更精细的控制（比如是否允许冒泡、是否可取消），可以用Event.custom来创建自定义事件属性，代码如下：

open Fable.React
open Fable.React.Props
open Thoth.Json.Decode

let onSlide (toMsg: int -> Msg) =
    let eventDecoder =
        Decode.at ["detail"; "userSlidTo"] Decode.int
        |> Decode.map toMsg
    Event.custom
        "slide"
        eventDecoder
        (EventOptions(bubbles = true, cancelable = true))

EventOptions里的参数可以根据你的实际需求调整，比如如果不需要事件冒泡，就把bubbles设为false。

额外提示：正确渲染自定义元素 #

最后别忘了在视图里正确渲染你的自定义range-slider元素，用Html.custom来渲染自定义标签，同时传递必要的自定义属性：

let view model dispatch =
    div [] [
        Html.custom "range-slider"
            [ Props.Custom ("max", string model.MaxValue)
              Props.Custom ("val", string model.CurrentValue)
              onSlide (fun value -> SlidTo value |> dispatch) ]
            []
    ]

为什么感觉不一样？ #

Elm的on函数默认封装了基础的事件选项，而Fable-React给了我们更灵活的选择：既可以用简洁的on重载快速实现，也可以用Event.custom定制细节，本质上都是绑定事件名、解析事件detail、映射到Msg的逻辑，和Elm的思路完全一致。

内容的提问来源于stack exchange，提问作者melston