haskell – 如何获得与鼠标在某个元素上相对应的Dynamic Bool？

2023年11月19日 242次阅读

假设我有一个按钮和一个正方形,如下所示：

main = mainWidget $do
    x <- button "Change color."
    y <- toggle False x
    z <- mapDyn style y
    elDynAttr "div" z blank

style :: Bool -> Map String String
style b | b         = "style" =: "height: 10ex; width: 10ex; background-color: #f00;"
        | otherwise = "style" =: "height: 10ex; width: 10ex; background-color: #900;"

按下按钮时,方块的颜色将在亮红色和深红色之间交替显示.

我想用一个绿色矩形替换按钮,当鼠标指针在它上面时,红色方块是明亮的,否则是黑暗的.对于奖励积分,我希望绿色矩形为div tabindex = 0,并确保红色方块在有焦点时亮,但是,一旦我理解了一般方法,我很可能能够通过我.

我的猜测是有一些API允许向el添加事件处理程序,但到目前为止我还没找到.也许完全有一个不同的approch,我不知道？

最佳答案 您需要的东西都是在
Reflex.Dom.Widget.Basic中找到的.如果您创建一个具有名称中带有素数的函数的小部件,例如el’,您可以获得El类型的对象,它是HasDomEvent的成员. domEvent是此类的唯一方法,它允许您提取与选定的事件名称之一相对应的事件流.将事件混合在一起并将它们转换为适当的动态,然后使用
Reflex.Class和
Reflex.Dynamic中的常用Reflex工具完成.您需要熟悉这些接口,但有一个有用的
quick reference.

(确保使用与您构建的Reflex版本匹配的文档,因为版本之间存在重大更改.)

编码案例的一种方法如下：

main = mainWidget $do
    y <- greenBox
    z <- mapDyn style y
    elDynAttr "div" z blank

style :: Bool -> Map String String
style ...  -- Abridged for brevity.

greenBox :: MonadWidget t m => m (Dynamic t Bool)
greenBox = do
    (e, _) <- elAttr' "div" ("style" =: "height: 10ex; width: 10ex; background-color: #0c0;") blank
    let
        eEnter = domEvent Mouseenter e
        eLeave = domEvent Mouseleave e
    holdDyn False . leftmost $[True <$eEnter, False <$eLeave]

我们在这里做的是为绿色框创建一个小部件,它返回一个动态,指示它是否被“激活”.其他一切都与你最初的例子一样.

感谢/u/dalaing advising me.

点赞