在纯卤素中创建后自动聚焦输入元素

Question

我正在使用purescript-halogen建立类似电子表格的表格（类似于Handsontable ）。 如果双击某个单元格，则html input元素将作为相应表单元格的子级呈现（并且对于所有其他单元格均不呈现此类元素）。

这对卤素灯非常有效，除了我不知道如何自动将焦点设置到新创建的输入元素上。

我尝试了autofocus属性，但这仅适用于双击的第一个单元格。 JavaScript的实现方法是在新元素上调用focus()方法，但在DOM更新了卤素之后，我不知道如何调用它。 有任何想法吗？

Answer 1

好的，这是我使用Phil的Initializer提示进行的操作：

编写一个实际上使元素聚焦的JavaScript函数。

exports.setFocusImpl = function(elemId) {
  return function() {
    document.getElementById(elemId).focus();
  };
};

FFI吧。

foreign import data FOCUS :: !

foreign import setFocusImpl :: forall e. Fn1 String (Eff (focus :: FOCUS | e) Unit)

setFocus :: forall e. String -> Eff (focus :: FOCUS | e) Unit
setFocus = runFn1 setFocusImpl

然后在初始化程序中使用setFocus函数。

H.input
[ A.id_ "inputField"
, A.Initializer do
    liftEff $ setFocus "inputField"
    pure DoNothing
] [ ]

请注意，我使用的是卤素的旧版本，但签名仍然是旧版本（ 30e8b2c7中Initializer定义 ）。