1

创建一个 figwheel/cljs/clj 应用程序，当用户点击一个按钮时在前端工作

我一直在阅读有关焦点切换和试剂/dom-node 的信息，但鉴于我在网页上显示了 innerHTML aka“真实值”，我将如何设置 on-click="" 以将光标移动到内部html（跨度）之外的组件并使其可编辑并且光标开始闪烁。

多谢你们

不确定你们是否想要一个代码片段，但有一个小部件，它几乎说明了以下内容：

{: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 :( ")}

再次感谢伙计们

4

2 回答 2

1

一个简单的解决方案是让两个字段都存在，使用 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}] ))

您还可以试验CSSvisible属性。

于 2018-06-19T23:39:58.067 回答
1

创建一个本地试剂原子，然后根据该原子的状态呈现可点击的 div 或输入元素。

(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。

于 2018-06-20T20:38:01.933 回答