haskell - 如何从 reflex-dom 列表框中获取 DoubleClicked 事件

Question

以下代码将 reflex-dom 下拉元素直观地显示为列表框，并始终在底部显示最后选择(单击)的行。

{-# LANGUAGE OverloadedStrings #-}
import           Reflex.Dom
import qualified Data.Text as T
import qualified Data.Map as Map
import           Data.Monoid((<>))
import           Data.Maybe (fromJust)

main :: IO ()
main = mainWidget $ el "div" $ do
  dd <- dropdown "2" (constDyn countries) $ def & attributes .~ constDyn ("size" =: "10")
  el "p" $ return ()
  let selItem = result <$> value dd 
  dynText selItem
  return ()

countries :: Map.Map T.Text T.Text
countries = Map.fromList [("1", "France"), ("2", "Switzerland"), ("3", "Germany"), ("4", "Italy"), ("5", "USA")]

result :: T.Text -> T.Text
result key = "You selected: " <> fromJust (Map.lookup key countries)

我想更改此代码，因此它始终显示在底部双击最后一行!

我尝试了几种方法

• 使用domEvent函数:这不起作用，因为Dropdown不是HasDomEvent类的实例。
• 过滤下拉记录的值_dropdown_change中的事件。但我没有找到任何方法来仅过滤 DoubleClick 事件。
• 使用新类型EventSelector。我再次不知道如何使用它。

问题:如何获得双击事件？

Answer 1

您可以使用domEvent来获得双击。

以下代码使用 elAttr 创建一个列表框，就像您使用下拉菜单创建的列表框一样。 domEvent 函数用于为每个列表框选项创建双击Event，然后将其组合以获得表示列表框选项的 Dynamic最近双击的选项。

为了进行比较，我保留了保管箱代码。

{-# LANGUAGE OverloadedStrings #-}
import           Reflex.Dom
import qualified Data.Text as T
import qualified Data.Map as Map
import           Data.Monoid((<>))
import           Data.Maybe (fromJust)
import           Data.Traversable (forM)


-- a listbox that responds to double clicks
listbox :: MonadWidget t m =>    T.Text                -- default
                              -> Map.Map T.Text T.Text -- entries
                              -> Map.Map T.Text T.Text -- attributes
                              -> m (Dynamic t T.Text)  
listbox def entries attr = do
  optEv <- elAttr "select" attr $ 
             forM (Map.toList entries) $ \(i,c) -> do

               let sel = if i == def
                         then "selected" =: "selected"
                         else mempty 

               (e, _) <- elAttr' "option"  sel $ text c

               return (i <$ domEvent Dblclick e)

  holdDyn def $ leftmost optEv

main :: IO ()
main = mainWidget $ el "div" $ do
  -- original code (responds to single clicks)
  dd <- dropdown "2" (constDyn countries) $ def & attributes .~ constDyn ("size" =: "10")
  el "p" $ return ()
  let selItem = result <$> value dd
  dynText selItem

  el "p" $ return ()

  -- new code (responds to double clicks)
  lb <- listbox "3" countries ("size" =: "10")
  el "p" $ return ()
  let dblItem = result <$> lb
  dynText dblItem

  return ()

countries :: Map.Map T.Text T.Text
countries = Map.fromList [("1", "France"), ("2", "Switzerland"), ("3", "Germany"), ("4", "Italy"), ("5", "USA")]

result :: T.Text -> T.Text
result key = "You selected: " <> fromJust (Map.lookup key countries)