如何在卤素中使焦点组件可组合

Question

在Halogen中玩一个简单的演示应用，用一个动态列表填充来自输入字段的值，我意识到，在单击按钮后将焦点返回到输入，是相当困难的。只有一种方法:定义FFI方法，该方法通过DOM id发现元素并调用焦点。卤素在创建时不会暴露DOM引用。

以id为目标的DOM是一种有限的方法，而且其本身不可伸缩。DOM ids是页面全局的。它们打破了抽象和孤立。组件是不可组合的！

缺乏DOM引用不仅损害了焦点，也损害了选择。

我猜卤素不会很快解决这个问题，所以我正在寻找一个变通方法。如何让组件，依靠焦点，可组合？

我认为一些分层的id生成器会有所帮助。它生成惟一的ids并将其分配给DOM元素，同时将它们公开给组件逻辑。

module Main where


import Prelude (Unit, bind, discard, map, unit, ($), (<>), show)

import Data.Array (snoc, length)
import Effect (Effect)
import Effect.Console (log)
import Effect.Aff (Aff)
import Data.Maybe (Maybe(..))
import Halogen (liftEffect)
import Halogen as H
import Halogen.Aff as HA
import Halogen.HTML as HH
import Halogen.VDom.Driver (runUI)
import Halogen.HTML.Properties as P
import Halogen.HTML.Events as E

main :: Effect Unit
main = HA.runHalogenAff do
  body <- HA.awaitBody
  runUI component unit body

type AppState = { names :: Array String
                , newName :: String
                }


data Action = Append | NewName String

component :: forall query input output. H.Component HH.HTML query input output Aff
component =
  H.mkComponent
  { initialState
  , render
  , eval: H.mkEval $ H.defaultEval { handleAction = handleAction }
  }
  where
    initialState _ = { names: ["Bill"]
                     , newName: ""
                     }
    render state =
      HH.div_
        [ HH.div_
          [ HH.input
            [ P.value state.newName
            , P.id_ "newNameField"
            , P.type_ P.InputText
            , P.autofocus true
            , E.onValueChange \s -> Just $ NewName s
            ]
          , HH.button [E.onClick \_ -> Just Append] [ HH.text "add" ]
          ]
        , HH.div_ (map (\n -> HH.div_ [HH.text n]) state.names)
        ]

    handleAction ev = do
      st <- H.get
      case ev of
        Append -> do
          case st.newName of
            "" -> liftEffect $ log "Empty new name"
            _  -> H.put st { newName = "", names = snoc st.names st.newName }
        NewName s -> do
          liftEffect $ log ("Update new name: [" <> s <> "]")
          H.put st { newName = s }

Answer 1

您可以使用RefLabel命名元素，请参见https://pursuit.purescript.org/packages/purescript-halogen/5.0.0/docs/Halogen.HTML.Properties#v:ref

然后您可以查询这些元素，请参见https://pursuit.purescript.org/packages/purescript-halogen/5.0.0/docs/Halogen.Query#v:getHTMLElementRef

与元素ids不同，卤素RefLabel是组件的本地ids。