2015-10-06 6 views
8

Учитывая следующий код:Как обнаружить «Enter» Keypress in Reagent?

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

Как изменить условие if таким образом, чтобы ввести нажатия клавиши можно отличить от обычных ключей? Все объекты в e за исключением target, кажется, имеют значение null.

ответ

17

вот как это исправить:

  1. вы должны слушать :on-key-press (а не :on-change), потому, что «ввести» не вызывает :on-change событие (это, очевидно, не меняет текст)
  2. ключевой код "введите" является , не
  3. использование charCode вместо keyCode (не эксперт в области JS, но keyCode не работает для меня в Firefox)

    [: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")))}] 
    
+2

Спасибо, это работает! Ты потрясающий! –

+2

'charCode' устарел,' key' [рекомендуется] (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent). – Bill

1

С 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.