使用Reagent与CLJS实现表单：如何获取输入值传入点击函数？

嘿，很高兴你已经开始用Reagent和CLJS写表单了！针对你想点击按钮获取输入框值并传给test-func的需求，这里有两种实用的实现方式，你可以根据自己的场景选择：

方法1：使用Reagent Refs直接获取DOM元素值 #

这种方式适合简单场景，直接通过引用获取输入框的DOM元素，然后读取它的值。

首先定义一个atom来存储输入框的DOM引用，然后在输入框的:ref属性里把DOM元素绑定到这个atom。点击按钮时，从引用中取出值并传给函数：

(ns your-app.core
  (:require [reagent.core :as r]))

;; 存储输入框的DOM引用
(def first-name-ref (r/atom nil))

;; 示例函数，替换成你的实际逻辑
(defn test-func [value]
  (println "你输入的名字是：" value))

(defn form []
  [:div
   [:input {:type "text"
            :name "first-name"
            :id "first-name"
            ;; 将输入框DOM元素绑定到ref atom
            :ref #(reset! first-name-ref %)}]
   [:button {:on-click (fn [e]
                         ;; 阻止按钮默认行为（比如表单提交）
                         (.preventDefault e)
                         ;; 确保引用存在，然后读取输入值
                         (when @first-name-ref
                           (test-func (.value @first-name-ref))))}
    "Click me!"]])

方法2：使用受控组件（推荐用于复杂表单） #

这种方式遵循React/Reagent的单向数据流理念，把输入框的值绑定到Reagent状态atom上。输入时实时更新状态，点击按钮直接从状态中取值。这种方式更适合需要实时验证、表单联动或多字段的场景。

(ns your-app.core
  (:require [reagent.core :as r]))

;; 存储表单状态的atom
(def form-state (r/atom {:first-name ""}))

(defn test-func [value]
  (println "你输入的名字是：" value))

(defn form []
  [:div
   [:input {:type "text"
            :name "first-name"
            :id "first-name"
            ;; 将输入框的值绑定到状态中的first-name字段
            :value (:first-name @form-state)
            ;; 输入变化时更新状态
            :on-change (fn [e]
                         (swap! form-state 
                                assoc :first-name 
                                (-> e .-target .-value)))}]
   [:button {:on-click (fn [e]
                         (.preventDefault e)
                         ;; 直接从状态中获取输入值并传递
                         (test-func (:first-name @form-state)))}
    "Click me!"]])

两种方式的对比 #

• Refs方式：代码更简洁，适合简单的一次性获取值的场景。
• 受控组件方式：更符合React生态的最佳实践，方便扩展（比如添加表单验证、清空输入、多字段联动等），推荐用于复杂表单。

内容的提问来源于stack exchange，提问作者jmargolisvt