Clojurescript re-frame: переключение фокуса на вновь созданный элемент

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

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

Я получаю сообщение об ошибке: Cannot read property 'focus' of null.

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

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


clojurescript re-frame
person frank    schedule 16.07.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

(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 или reagent/dom-node вместо использования кода взаимодействия JS в функции-обработчике componentDidMount.

person Featalion    schedule 19.07.2017