Reagent文本输入组件值修改后格式化失效问题求助

我之前也碰到过类似的问题，核心是要把数据存储和视图渲染分离开——让ratom保存原始的数值类型，而输入框显示格式化后的字符串，同时在用户输入时做好解析转换，这样每次修改后组件都会自动重新渲染出格式化后的内容。

具体实现步骤 #

1. 用ratom存储原始数值：不要把格式化后的字符串存在ratom里，而是保存纯数字（整数或浮点数），这样后续格式化才有可靠的数据源。
2. 渲染时格式化显示：在输入框的:value属性里，用cl-format把ratom里的数值转换成带千位分隔的字符串。
3. 处理输入解析：在on-change事件中，把用户输入的字符串过滤、解析成纯数值，再更新ratom。

整数价格示例代码 #

(ns your-namespace
  (:require [reagent.core :as reagent]
            [clojure.string :as str]))

; 存储原始整数价格的ratom
(def price (reagent/atom 1234567))

(defn formatted-price-input []
  [:input
   {:type "text"
    ; 渲染时将数值格式化为带千位空格分隔的字符串
    :value (cl-format nil "~:d" @price)
    :on-change (fn [e]
                 (let [raw-input (-> e .-target .-value)
                       ; 过滤掉所有非数字字符，解析为整数
                       parsed-num (-> raw-input
                                     (str/replace #"[^0-9]" "")
                                     (js/parseInt 10))]
                   ; 确保解析结果有效时再更新ratom
                   (when-not (js/isNaN parsed-num)
                     (reset! price parsed-num))))}])

浮点数价格（带小数）示例代码 #

如果需要支持小数价格，只需要调整格式化和解析逻辑：

(defn format-decimal-price [num]
  ; 格式化整数部分加千位分隔，小数部分保留两位
  (cl-format nil "~:d.~2,'0d" (int num) (mod (* num 100) 100)))

(defn decimal-price-input []
  [:input
   {:type "text"
    :value (format-decimal-price @price)
    :on-change (fn [e]
                 (let [raw-input (-> e .-target .-value)
                       ; 只保留数字和小数点，解析为浮点数
                       parsed-num (-> raw-input
                                     (str/replace #"[^0-9.]" "")
                                     (js/parseFloat))]
                   (when-not (js/isNaN parsed-num)
                     (reset! price parsed-num))))}])

为什么之前的方式会失效？ #

如果之前你是把格式化后的字符串直接存在ratom里，后续用户输入新内容时，ratom里的内容变成了带空格的字符串，再用cl-format处理就会出错（因为cl-format的~:d需要数字类型，而不是字符串）。把数据和视图分离后，ratom始终保存可靠的数值，渲染层负责格式化展示，就能避免这个问题。

内容的提问来源于stack exchange，提问作者tkircsi