4

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

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;"

按下按钮时，正方形的颜色将在亮红色和暗红色之间交替。

我想用绿色矩形替换按钮，当鼠标指针悬停在它上面时，红色方块是亮的，否则是暗的。对于加分，我希望绿色矩形为 adiv tabindex=0并确保红色正方形在焦点集中时是亮的，但是，一旦我了解了一般方法，我可能会自己弄清楚。

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

4

1 回答 1

1

你需要的东西都在Reflex.Dom.Widget.Basic. 如果您使用名称中带有素数的函数创建一个小部件，例如el'，您可以获得一个类型为 的对象El，它是 的成员HasDomEvent。domEvent是此类的唯一方法，可让您提取与所选事件名称之一相对应的事件流。Dynamic然后使用 和 中的一些常用 Reflex 工具将事件混合在一起并将它们转换为适当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]

我们在这里所做的是为绿色框创建一个小部件，该小部件返回一个 Dynamic 指示它是否“激活”。其他一切都与您最初的示例一样。

感谢/u/daling在这方面向我提供建议。

于 2018-04-19T07:48:38.673 回答