Om 格式化文本输入组件光标跳转

Question

（我对 OM 和 React 有点陌生，所以如果这被记录在我还没有看到的某个地方，我深表歉意。）

我正在尝试制作一个文本框，在编辑过程中验证和格式化其输入，类似于autoNumeric JS 库。

我的应用程序用于验证美元货币（例如 $1,234.56 形式的字符串）。具体来说，文本框应防止用户在文本框中输入无效字符（如字母），并应即时格式化其内容以包括美元符号 ($) 和标记千位的逗号。该组件应防止删除这些格式字符。 JS toLocaleString 函数已经很好地处理了格式设置，但是我在 UI 和输入后光标的位置出现问题。

我找到了一个相关的react github issue，它描述了如何防止光标在应用状态更新后跳来跳去。捕获该线程的解决方案是a JS Bin，但它是使用 React 用 javascript 编写的。

我正在尝试使用 ClojureScript 和 Om 实现一个版本，但遇到了麻烦。如果我只使用组件本地状态而不使用全局应用程序状态来实现组件，那么光标会执行预期的行为并且不会跳转（类似于 autoNumeric 库）。最终我想将价值传播到全球应用程序状态。但是，当我让组件更新全局应用程序状态时，每次更改输入字段后光标都会跳转。

我尝试了许多变体，包括不使用本地状态（仅使用全局应用状态）以及混合使用全局和本地。每当我包含全局应用程序状态时，光标都会跳转。

这是我当前的实现，它还没有更新全局应用状态，但没有跳跃光标。 （注意，我用的是om-tools，所以语法可能和vanilla om有点不同。）

(defn raw-number [s]
  (let [s (if (empty? s "0" (str s)))]
    (js/parseFloat (str/replace s #"[^-0-9.]" ""))))

(defn format-currency [s]
  (.toLocaleString (raw-number s) "en-US" #js {:style "currency" :currency "USD"}))

(defcomponentk validated-input
  "Component that prevents the cursor from jumping after updates."
  [data owner opts]
  (will-receive-props [_ new-state]
    (when-let [dom-node (om/get-node owner "validated-input")]
      (let [old-length (-> dom-node .-value count)
            old-idx (.-selectionStart dom-node)
            _ (set! (.-value dom-node) new-state)
            new-len (count new-state)
            new-idx (max 0 (-> new-len (- old-length) (+ old-idx)))]
        (om/update! data :cursor-pos new-idx))))

  (did-update [_ _ prev-state]
    (let [new-idx (:cursor-pos data)
          dom-node (om/get-node owner "validated-input")]
      (set! (.-selectionStart dom-node) new-idx)
      (set! (.-selectionEnd dom-node) new-idx)))

  (render [_]
    (dom/input
     (merge
      opts
      {:type "text"
       :ref "validated-input"}))))


(defcomponentk formatted-input
  "Formats the text using the provided formatter before rendering it."
  [data owner [:opts formatter :as opts]]
  (init-state [_]
    {:text (formatter "")})

  (render [_]
    (let [text (om/get-state owner :text)]
      (validated-input
       text ;; << I recognize this to be shady, passing local state down. but it works to prevent the cursor jumping.
       {:opts
        (merge
         opts
         {:value text
          :on-change (fn [e]
                       (let [new-val (formatter (str (.. e -target -value)))]
                         (om/set-state! owner :text new-val)))})}))))

Answer 1

我想我被绊倒了，因为对本地状态的更改和对全局状态的更改都触发了重新渲染。我最终使用了一个有点 hacky 的解决方法，在本地状态中使用 atom 来避免重新触发重新渲染。

该解决方案在桌面上运行良好，但由于它依赖于 on-click 或 on-key-down 事件，我不确定它是否能在移动设备上运行良好。

无论如何，它都适合我的需要。欢迎批评！

(defn save-position! [owner event]
  (let [found-node (om/get-node owner "validated-input")
        idx-atom (om/get-state owner :idx-atom)
        new-idx (if (nil? found-node) @idx-atom (.-selectionStart found-node))]
    (reset! idx-atom new-idx)))

(defcomponentk formatted-input
  "Formats the text using the provided formatter before rendering it."
  [data owner [:opts formatter :as opts]]
  (init-state [_]
    {:idx-atom (atom 0)})

  (did-update [_ prev-props prev-state]
    (let [dom-node (om/get-node owner "validated-input")

          old-text (:text prev-props)
          new-text (:text data)

          old-len (count old-text)
          new-len (count new-text)

          delta-len (- new-len old-len)
          old-idx @(:idx-atom prev-state)

          new-idx (max 0 (+ delta-len old-idx))]
      (set! (.-selectionStart dom-node) new-idx)
      (set! (.-selectionEnd dom-node) new-idx)))

  (render [_]
    (dom/input
     (merge
      opts
      {:value (formatter (str (:text data)))
       :type "text"
       :ref "validated-input"
       :on-click (fn [dom-node] (save-position! owner dom-node))
       :on-key-down (fn [dom-node] (save-position! owner dom-node))
       :on-change (fn [dom-node]
                    (let [new-val (formatter (str (.. dom-node -target -value)))
                          old-idx @(om/get-state owner :idx-atom)
                          found-node (om/get-node owner "validated-input")]
                      (when (not= new-val (.-value found-node))
                        (set! (.-value found-node) new-val)
                        (set! (.-selectionStart found-node) old-idx)
                        (set! (.-selectionEnd found-node) old-idx))
                      (om/update! data :text new-val)))}))))