Реагент превращает диапазон в редактируемое поле при нажатии

Создание приложения figwheel / cljs / clj, работающего в интерфейсе пользователя, когда пользователь нажимает кнопку. Я хочу превратить диапазон в редактируемое поле при щелчке с помощью реагента. Как мне это сделать?

Я читал о переключении фокуса и реагенте / dom-node, но, учитывая, что у меня есть innerHTML, также известный как «реальные значения», отображаемый на веб-странице, как мне настроить on-click = "", чтобы по существу переместить курсор на компонент за пределами innerhtml (диапазон) и сделайте его редактируемым, и курсор начнет мигать.

Спасибо ребята

Не уверен, хотите ли вы, ребята, фрагмент кода, но у вас есть виджет, который в значительной степени говорит следующее:

{:type     :plain-icon-button
 :label    [:i.ti-pencil-alt]
 :tooltip  "Click here to edit"
 :attr     {:tab-index -1}
 :on-click (fn [] (prn "What do i do here :( ")}

еще раз спасибо, ребята


clojurescript reagent reagent-forms
person dwaodkwadok    schedule 19.06.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Одним из простых решений является наличие обоих полей, с помощью свойства CSS display: none; для их переключения так что только 1 виден за раз. В Иккинге:

(:require
  [garden.core :as garden]
  [goog.style :as style]

[:div
  [:button#mybtn     {:display :initial}]
  [:textfield#mytf   {:display :none   }]]

а затем переключите стили с помощью {:onclick hide-btn}

(defn install-css [css-def]
  (let [css-str (garden/css css-def)]
    (style/installStyles css-str)
    css-str))

(defn hide-btn []
  (install-css [:#mybtn {:display :none   }] )
  (install-css [:#mytf  {:display :initial}] ))

Вы также можете поэкспериментировать с свойством CSS visible.

person Alan Thompson    schedule 19.06.2018

arrow_upward
1
arrow_downward

Создайте локальный атом реагента, а затем визуализируйте либо интерактивный элемент div, либо элемент ввода в зависимости от состояния этого ratom.

(defn click-me
  []
  (let [clicked (reagent/atom false)]
    (fn []
      (if @clicked
        [:input {:type "text"
                 :auto-focus true
                 :on-blur #(reset! clicked false)}]
        [:div {:on-click #(reset! clicked true)}
         "Click me."]))))

Вы, вероятно, захотите добавить on-click к :input, который отправит данные, а затем снова установит clicked в значение false.

person Justin L.    schedule 20.06.2018
comment
Отметил спасибо, Джастин! Использование ur и парней из вышеупомянутого комментария отлично сработало для меня. Я просто особо не касался интерфейса CLJS, но начинаю понимать. Спасибо еще раз! - person dwaodkwadok; 21.06.2018