Перекадровка Clojurescript: изменение фокуса на вновь созданный элемент

Question

Я строю приложение перерамки со списком полей ввода текста. Я хотел бы, чтобы поведение было таким, когда пользователь нажимает RETURNсоздается новая строка и фокус помещается на новую строку. Мне удалось создать новую строку, однако, когда я пытаюсь изменить фокус на эту новую строку с помощью этого вызова в change-focus обработчик события:

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

Я получаю ошибку: Cannot read property 'focus' of null,

Я предполагаю, что это потому, что представление еще не отрисовало вновь созданную строку. Каков наилучший способ изменения фокуса на новый элемент с помощью перерамки?

Должен ли я поместить активный ряд в свой атом состояния и отобразить его в виде? Или, возможно, запустить другое событие после того, как представление было визуализировано? Я хотел бы некоторый вклад.

Answer 1

Если каждая строка, добавляемая вашей формой, является компонентной, то вы можете установить обработчик на componentDidMount жизненный цикл обратного вызова. Он будет вызван после того, как компонент уже отрендерен. Чтобы сделать это в re-frame ты должен использовать reagent"s create-class как это

(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 функция обработчика.