ReflexFRP：如何在单击按钮时从 textInput 设置按钮文本

Question

我有一个简单的小部件，可以设置给定文本输入字段中按钮的 "text"。

虽然我设法做了一个简单清晰的功能

buttonWidget :: MonadWidget t m => m ()
buttonWidget = do
  send  <- button "clear"
  input <- textInput $ def & setValue .~ fmap (const "") send
  return ()

我没能设置按钮标签 - 下面的代码可以编译

buttonWidget :: MonadWidget t m => m ()
buttonWidget = do
  rec send  <- button val
      input <- textInput $ def & setValue .~ fmap (const "") send
      val   <- sample $ current $ view textInput_value input
  return ()

但查看输出 index.html - 我只得到一个带有控制台错误消息的白页：

rts.js:7313 thread blocked indefinitely in an MVar operation

Answer 1

reflex-dom中的原版按钮似乎不支持动态标签；所以对于

solutionWidget :: MonadWidget t m => m ()
solutionWidget = do
  rec send  <- dynButton dyn
      input <- textInput $ def & setValue .~ fmap (const "") send
      dyn <- holdDyn "click button to set text below"
                     (tag (current $ view textInput_value input) send)
  return ()

我们需要定义以下内容：

dynButton :: MonadWidget t m => Dynamic t Text -> m (Event t ())
dynButton s = do
  (e, _) <- elAttr' "button" (Map.singleton "type" "button") $ dynText s
  return $ domEvent Click e

Answer 2

这里发生的是 button 接受字符串（或文本，取决于版本），这个字符串取决于文本输入的值，而文本输入又取决于按钮产生的事件.现在，事件网络中通常类似的循环就可以了，但是在这里您需要对输入值进行采样以获取文本 before 按钮甚至被渲染（因为它需要该文本渲染到DOM).

以下代码（用 hsnippet 编写，所以较旧的 reflex-dom 和简化的（无镜头）显示了如何定义不需要输入文本的 'button' 助手在写入 DOM:

之前实现

app :: MonadWidget t m => App t m ()
app = do
  rec send  <- button' $ _textInput_value input
      input <- textInput $ def { _textInputConfig_setValue = fmap (const "") send }
  return ()

button' :: MonadWidget t m => Dynamic t String -> m (Event t ())
button' s = do
  (e, _) <- elAttr' "button" (M.singleton "type" "button") $ dynText s
  return $ domEvent Click e

ReflexFRP：如何在单击按钮时从 textInput 设置按钮文本

ReflexFRP: How to set button text from textInput on button click

haskell

frp

reflex