Electric Clojure：如何向表格添加新值并改用提交按钮触发

核心修改思路 #

• 将存储单个用户名/邮箱的原子改为存储用户列表的原子，避免新输入覆盖旧值
• 用提交按钮的click事件替代回车触发提交逻辑
• 绑定输入框值到原子，实现实时同步，提交后清空输入框

修改后的完整代码 #

(e/defn TableApp []
  (e/client
    (let [!new-username (atom "")
          !new-email (atom "")
          !users (atom [])] ; 存储所有用户数据的列表原子
      ; 用户名输入框：双向绑定值到!new-username
      (dom/input (dom/props {:placeholder "Please write your username..."
                             :value (e/watch !new-username)})
        (dom/on "input"
          (e/fn [e]
            (reset! !new-username (.-value (.-target e))))))
      
      ; 邮箱输入框：同理双向绑定
      (dom/input (dom/props {:placeholder "Please write your email..."
                             :value (e/watch !new-email)})
        (dom/on "input"
          (e/fn [e]
            (reset! !new-email (.-value (.-target e))))))
      
      ; 提交按钮：点击时添加新用户到列表
      (dom/button (dom/props {:style {:margin-left "8px"}})
        (dom/text "Add User")
        (dom/on "click"
          (e/fn []
            (let [username (contrib.str/empty->nil @!new-username)
                  email (contrib.str/empty->nil @!new-email)]
              ; 验证输入非空后添加用户
              (when (and username email)
                (swap! !users conj {:username username :email email})
                ; 清空输入框
                (reset! !new-username "")
                (reset! !new-email ""))))))
      
      ; 用户表格：遍历列表渲染所有条目
      (dom/table (dom/props {:class "hyperfiddle" :style {:margin-top "16px" :border-collapse "collapse"}})
        ; 表头
        (dom/tr
          (dom/th (dom/text "Username") (dom/props {:border "1px solid #ccc" :padding "8px"}))
          (dom/th (dom/text "Email") (dom/props {:border "1px solid #ccc" :padding "8px"})))
        ; 用e/for-by高效渲染列表，以username作为唯一标识
        (e/for-by :username [user (e/watch !users)]
          (dom/tr
            (dom/td (dom/text (:username user)) (dom/props {:border "1px solid #ccc" :padding "8px"}))
            (dom/td (dom/text (:email user)) (dom/props {:border "1px solid #ccc" :padding "8px"}))))))))

关键修改点说明 #

1. 数据存储优化：
   原代码用单个原子存储单个值，reset!会直接覆盖；改为!users列表原子后，用swap! !users conj ...追加新用户，保留所有历史数据。
2. 输入框双向绑定：
   通过value (e/watch !new-username)绑定输入框显示值，input事件同步更新原子，确保点击按钮时能获取最新输入内容。
3. 提交逻辑简化：
   移除回车触发的keydown事件，改用按钮click事件统一处理提交，逻辑更清晰，符合用户操作习惯。
4. 表格高效渲染：
   使用e/for-by遍历列表，指定:username作为唯一key，Electric会自动复用现有DOM元素，只更新新增的行，提升渲染性能。
5. 输入验证与清空：
   提交前验证用户名和邮箱都非空，避免无效数据；提交后清空输入框原子值，同步清空输入框显示。

内容的提问来源于stack exchange，提问作者Barış Can Ateş