我正在制作一个React/ClojureScript应用程序,它的输入是最小值和最大值,然后是一个输入,如果它在最小-最大值的范围内,就会检查它。然后,如果它在该范围内,它将启用一个有效按钮,如果不在,则将其禁用。它适用于最小和最大范围原子的初始值,但当我通过网页上的输入更改它们时,它们错误得像疯了一样,我不知道为什么,因为无论我在哪里查看最小和最大范围的值,似乎我的范围内和有效按钮都应该有效。
(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
,当我改变min-get
和max-get
时,我应该有3个输入和一些输入,那么range-validation
中的有效按钮应该根据传递的值在disabled
和enabled
之间切换。
编辑1:
当我通过输入更改min-range和max-range值时,Valid按钮不能按预期工作,例如,在初始启动时,值是0min,100max。因此,从0到100的所有数字都使有效按钮处于活动状态,但当数字为-1和101时,它们将被禁用。但是,如果我将最大范围改为75,它就会出错,随机数似乎会使按钮有效和无效。
发布于 2019-04-24 06:52:01
原来原子一开始是数字类型的,一旦用户与输入交互,它们就变成了字符串/文本类型,因此操作符clojure操作符(<=字符串)将它们进行比较,就好像它们是字符串而不是数字一样。在范围内将值转换为(int)?函数解决了我的问题。
https://stackoverflow.com/questions/55803018
复制相似问题