单击时将跨度变成可编辑字段的试剂答案

【问题标题】：Reagent turning span into editable field on click单击时将跨度变成可编辑字段的试剂
【发布时间】：2018-11-28 23:12:14
【问题描述】：

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

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

谢谢大家

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

{: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

【解决方案1】：

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

你也可以试试the CSS visible property.

【讨论】：

【解决方案2】：

创建一个本地试剂原子，然后根据该原子的状态呈现可点击的 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。

【讨论】：

感谢贾斯汀！使用你和上面评论的人对我来说非常有效。我只是没有真正接触太多前端 CLJS，但我开始明白了。再次感谢！