Question

我正在制作一个带有输入的最小值和最大值的React / ClojureScript应用程序，然后输入一个输入，该输入将被检查是否在min-max范围内。然后，如果它在范围内，它将启用一个 Valid 按钮，如果不禁用它。它适用于最小和最大范围的原子初始值，但是当我通过网页上的输入更改它们时，它们会像疯狂一样出错，并且我无法弄清楚为什么，因为无论我在哪里查看最小和最大值，似乎我的有效范围和有效按钮应该可以正常工作。

(def min-range (reagent/atom 0))

(def max-range (reagent/atom 100))

(defn min-get []
  [:div
   "The atom " [:code "min-range"] " has value: "
   @min-range ". "
   [:input {:type "number" 
            :on-change #(reset! min-range (-> % .-target .-value))}]])

(defn max-get []
  [:div
   "The atom " [:code "max-range"] " has value: "
   @max-range ". "
   [:input {:type "number" 
            :on-change #(reset! max-range (-> % .-target .-value))}]])

(defn atom-input [value]
  [:input {:type "number"
           :value @value
           :on-change #(reset! value (-> % .-target .-value))}])

(defn in-range? [number]
  (if (and (>=  number @min-range) (<= number @max-range))  false true))

(defn range-validation [val]
  [:div
   "Number must be between "  @min-range
   " :  and "  @max-range " : "
   [:input {:type "button" :value "Valid" :disabled (in-range? val)}]])

(defn check-me []
  (let [val (reagent/atom 0)]
    (fn []
      [:div
       "Value to be checked  "
       [:p "the value is " @val]
       [:p [atom-input val]]
       [:on-change [:p @min-range " + "  @max-range]]
       [:on-change [range-validation @val]]])))

因此，如果我渲染min-get，max-get和check-me，我应该得到3个输入，当我更改min-get和max-get时，有一些输入，然后<根据所传递的值，range-validation中的em>有效按钮应在disabled和enabled之间切换。

编辑1：

当我通过输入更改最小范围和最大范围值时，“有效”按钮将无法正常工作，例如在首次启动时，该值为0min 100 max。因此，从0到100的所有数字均使有效按钮保持活动状态，但是在-1和101处它们被禁用。但是，如果我将最大范围更改为75，则会出错，并且随机数似乎会使按钮有效和无效。

Answer 1

证明原子开始具有数字类型，然后用户与输入进行交互后，它们便立即变为字符串/文本类型，因此运算符clojure运算符（<=字符串字符串string）将它们进行比较，就好像它们是字符串一样而不是数字。将值转换为范围内的（int）？函数解决了我的问题。

简单的原子重置和验证检查无法按预期进行

1 个答案: