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

问题描述 投票:1回答:1

我正在创建一个React / ClojureScript应用程序,其输入为最小值和最大值,后跟输入,如果它在最小值 - 最大值范围内,将检查该输入。然后,如果它在范围内,它将启用一个有效按钮,如果没有禁用它。它适用于最小和最大范围的原子的初始值,但是当我通过网页上的输入更改它们时,它们会像疯了一样错误,我无法弄清楚为什么因为无论我在哪里看到min和max的值,它似乎我的范围和有效按钮应该工作。

(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-getmax-getcheck-me,我应该最终得到3个输入,有些当我更改min-getmax-get时,range-validation中的Valid按钮应该根据传递的值在disabledenabled之间切换。

编辑1:

当我通过输入更改最小范围和最大范围值时,“有效”按钮不能按预期工作,例如在初始启动时,最大值为0分钟100。因此,0-100之间的所有数字都保持有效按钮处于活动状态,但在-1和101处它们被禁用。但是,如果我将最大范围更改为75,则会出现错误,随机数似乎会使按钮有效且无效。

reactjs clojurescript reagent reagent-forms
1个回答
0
投票

结果是原子开始有数字类型,然后一旦用户与输入交互,他们就会改变为字符串/文本类型,因此操作符clojure操作符(<=字符串字符串)将它们比作字符串而不是数字。在范围内将值转换为(int)?功能解决了我的问题。

© www.soinside.com 2019 - 2024. All rights reserved.