如何获得对应于鼠标在某个元素上的动态布尔值?

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，但到目前为止我没有找到。也许有一个完全不同的方法，我不知道？

Answer 1

你需要的东西都可以在Reflex.Dom.Widget.Basic中找到。如果创建一个名称中带有素数的函数的小部件，例如el'，则可以获取类型El的对象，该对象是HasDomEvent的成员。domEvent是此类的唯一方法，允许您提取与所选事件名称之一对应的事件流。然后将事件混合在一起并将它们转换为适当的Dynamic然后使用Reflex.Class和Reflex.Dynamic中找到的一些常用的反射工具完成。您确实需要熟悉这些界面，但有一个有用的快速参考。

(请确保使用与您构建的 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 为此向我提供建议。