如何在Reagent中检测"Enter"按键？

Question

考虑以下代码：

  [:input {:type "text"
           :value (:text @app-state)
           :on-change (fn [e]
                        (if (= 31 (.-keyCode e))
                          (println "ENTER")
                          (println "NOT ENTER")))}]

如何更改if条件，以便可以区分回车键按下和普通按键？除target之外，e中的所有属性似乎都为null。

- Michiel de Mare

Answer 1

以下是修复方法：

1. 应该监听:on-key-press（而不是:on-change），因为“enter”不会触发:on-change事件（显然它并没有改变文本）
2. “enter”的键码是13，不是31

3. 使用charCode代替keyCode（我不是js专家，但keyCode在火狐浏览器中无效）

   [:input {:type "text"
            :value (:text @app-state)
            :on-key-press (fn [e]
                            (println "key press" (.-charCode e))
                            (if (= 13 (.-charCode e))
                              (println "ENTER")
                              (println "NOT ENTER")))}]
   

- leetwinski

---

charCode 已经被废弃，推荐使用 key（请参考 https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent）。 - BillRobertson42

Answer 2

使用key关键字。

[:input
 {:on-key-press
  (fn [e]
    (if (= (.-key e) "Enter")
      (.log js/console "Enter")
      (.log js/console "Not Enter")))}]

还有一些有趣的内容是 :on-key-up 和 :on-key-down。

- deadghost

---

太好了，我不知道 .-key 这个方法。你也可以使用 js/console.log 来节省一个字符。 :^) - Harold