2

我正在制作一个 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]]])))

因此，如果我 render min-get，我应该最终得到 3 个输入和一些当我更改时，然后Valid按钮应该在传递的值之间切换并取决于传递的值。max-getcheck-memin-getmax-getrange-validationdisabledenabled

编辑1：

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

4

1 回答 1

0

原来原子开始具有数字类型，然后一旦用户与输入交互，它们就会更改为字符串/文本类型，因此操作符 clojure 操作符 (<= string string string) 将它们进行比较，就好像它们是字符串而不是数字一样. 在范围内将值转换为（int）？功能解决了我的问题。

于 2019-04-23T22:52:01.283 回答