1

我正在构建一个带有文本输入字段列表的重新框架应用程序。我希望行为是当用户按下时RETURN，会创建一个新行并将焦点放在新行上。change-focus但是，当我尝试使用事件处理程序中的此调用将焦点更改到该新行时，我已成功创建新行：

(.focus (.getElementById js/document focus-element))

我收到一个错误：Cannot read property 'focus' of null。

我认为这是因为视图尚未呈现新创建的行。使用重新框架将焦点更改为新元素的最佳方法是什么？

我应该将活动行放在我的状态原子中并在视图中呈现它吗？或者可能在视图被渲染后触发另一个事件？我想要一些输入。

4

1 回答 1

0

如果您的表单添加的每一行都是组件，那么您可以在componentDidMount生命周期回调中设置处理程序。它将在组件已经渲染后被调用。要做到这一点，re-frame你应该使用reagent's create-classlike that

(defn my-row [input-id]
  (reagent/create-class
   {:component-did-mount
    #(.focus (.getElementById js/document input-id))
    :reagent-render
    (fn [input-id]
      [:div.form-group
       [:input.form-control {:id input-id, :type "text"}]])}))

您可以尝试使用 React.JS refs 或在处理函数reagent/dom-node中使用 JS 互操作代码。componentDidMount

于 2017-07-19T00:21:37.303 回答