我正在创建一个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-get
,max-get
和check-me
,我应该最终得到3个输入,有些当我更改min-get
和max-get
时,range-validation
中的Valid按钮应该根据传递的值在disabled
和enabled
之间切换。
编辑1:
当我通过输入更改最小范围和最大范围值时,“有效”按钮不能按预期工作,例如在初始启动时,最大值为0分钟100。因此,0-100之间的所有数字都保持有效按钮处于活动状态,但在-1和101处它们被禁用。但是,如果我将最大范围更改为75,则会出现错误,随机数似乎会使按钮有效且无效。
结果是原子开始有数字类型,然后一旦用户与输入交互,他们就会改变为字符串/文本类型,因此操作符clojure操作符(<=字符串字符串)将它们比作字符串而不是数字。在范围内将值转换为(int)?功能解决了我的问题。