Question

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

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，我不知道？

Answer 1

您需要的东西都在Reflex.Dom.Widget.Basic中找到。如果您使用名称中包含素数的函数（例如el'）创建窗口小部件，则可以保留El类型的对象，该对象是HasDomEvent的成员。 domEvent是此类的唯一方法，它允许您提取与选定的事件名称之一相对应的事件流。然后将事件混合在一起并将其转换为适当的Dynamic，然后使用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]

我们在这里做的是为绿色框创建一个小部件，它返回一个动态，指示它是否已激活＆＃34;。其他一切都与你最初的例子一样。

感谢/u/dalaing advising me就此问题。

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

1 个答案: