单击时试剂将跨度变为可编辑字段

Question

创建一个 figwheel/cljs/clj 应用程序，当用户点击按钮时在前端工作我想使用 reagent 在点击时将 span 变成可编辑的字段，我该怎么做？

我一直在阅读有关焦点切换的内容，并且 reagent/dom-node 但是鉴于我在网页上显示了 innerHTML aka "real values"，我将如何设置 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 :( ")}

再次感谢大家

Answer 1

一个简单的解决方案是同时显示两个字段，using the CSS property display: none; 切换它们，这样一次只有一个可见。在小嗝嗝中：

(: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.

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

单击时试剂将跨度变为可编辑字段

Reagent turning span into editable field on click

clojurescript

reagent

reagent-forms