haskell - Reflex-FRP 中的计数器小部件

Question

我正在尝试在 Reflex 中制作一个具有以下品质的计数器小部件：

1. 它的最小值为 0 - 在 0 时点击“减量”不会导致任何事情发生。

2. （已解决）增量按钮在减量按钮的右侧。

3. 它应用了 Bulma CSS 样式。

这是我目前拥有的代码：

bodyElementIncrRounds :: ObeliskWidget js t route m => m ()
bodyElementIncrRounds = do
    -- el "h2" $ text "Using foldDyn with function application"
    evIncr <- button "Increment"
    evDecr <- button "Decrement"
    -- evReset <- button "Reset"
    dynNum <- foldDyn ($) (0 :: Int) $ leftmost [(+ 1) <$ evIncr, (+ (-1)) <$ evDecr]
    el "h3" $ display dynNum
    return ()

结果是这样的：

当我尝试通过将这些按钮翻转为 values: 来交换按钮时(+ 1) <$ evIncr, (+ (-1)) <$ evDecr，它对按钮的位置完全没有影响。（即增量保留在左侧。）

当我尝试像这样应用 Bulma 代码时：

bodyElementIncrRounds :: ObeliskWidget js t route m => m ()
bodyElementIncrRounds = do
    -- el "h2" $ text "Using foldDyn with function application"
    evIncr <- elAttr "button" ("class" =: "button") $ button "Increment"
    evDecr <- button "Decrement"
    -- evReset <- button "Reset"
    dynNum <- foldDyn ($) (0 :: Int) $ leftmost [(+ 1) <$ evIncr, (+ (-1)) <$ evDecr]
    el "h3" $ display dynNum
    return ()

它出于某种原因复制了按钮，并将现有的（丑陋的）按钮放置在 Bulma 小部件内（编辑：复制问题已解决，但不是“按钮内的按钮”问题）：