textarea - 如何在试剂中定义聊天输入字段？

Question

假设您有一个文本字段，它是用带有 reagent 的 cljs 编写的聊天程序的输入。它可能看起来像这样:

(defn chat-input []
  (let [written-text (atom "")]
    (fn []
      [:textarea
       {:value     @written-text
        :on-change #(reset! written-text (-> % .-target .-value))}])))

现在实现发送消息的简单方法是添加一个发送按钮。但是有一种交互对于聊天来说是如此不可或缺，以至于您真的离不开它:输入或 shift-enter 发送消息。但我不知道如何实现它。

我的第一个尝试是简单地添加一个 :on-key-press 事件处理程序来发送消息并将状态重置为“”。此解决方案的灵感来自 How to detect enter key press in reagent .

(defn chat-input []
  (let [written-text (atom "")]
    (fn []
      [:textarea
       {:value        @written-text
        :on-change    #(reset! written-text (-> % .-target .-value))
        :on-key-press (fn [e]
                        (let [enter 13]
                          (println "Key press" (.-charCode e))
                          (if (= (.-charCode e) enter)
                            (reset! written-text "")
                            (println "Not enter."))))}])))

问题是 :on-key-press 中对 (reset! written-text "") 的调用没有效果，可能是因为它被:on-change 事件处理器。

那么你对如何实现这个功能有什么想法吗？如果是这样，请分享!

Answer 1

你在正确的轨道上，但忘记了 js 事件模型:在你的情况下 onChange 和 onKeyPress 都被触发，因为目标是一个文本区域，其中输入键改变输入。所以在 js 中 onKeyPress 首先被触发，然后如果键会改变某些东西，它会触发 onChange 。您需要使用 preventDefault 禁用 keyPress 的默认行为:

(defn chat-input []
  (let [written-text (atom "")]
    (fn []
      [:textarea
       {:value        @written-text
        :on-change    #(reset! written-text (.. % -target -value))
        :on-key-press (fn [e]
                        (when (= (.-charCode e) 13)
                          (.preventDefault e)
                          (reset! written-text "")))}])))

这应该可以解决问题。