0

我想使用试剂形式绑定到输入的原子中有一些数据结构。棘手的是，我不仅想将输入的内容绑定到所述原子，还想将输入本身绑定；即我想通过操作原子反应性地删除和添加输入字段。这是我所拥有的简化示例：

(ns my.app
  (:require
   [reagent.core :as r]
   [reagent-forms.core :as rf]))

(def appstate
  (r/atom {1 "a"
           2 "b"
           3 "c"}))

(defn inputfield
  ""
  [id]
  [:input {:field :text
           :id [id]}])

(defn inputfields
  ""
  []
  [:div
   (for [item @appstate]
     (inputfield (first item)))])

(defn total
  ""
  []
  [:div
   [rf/bind-fields (inputfields) appstate]
   [:div (str @appstate)]])

(r/render 
    [total]
    (js/document.getElementById "mainframe"))

只要对输入字段的更改由原子反映，这就是有效的。一旦我评估以下内容，缺点就会变得明显：

(swap! appstate #(assoc % 4 "d"))

虽然这确实改变了原子，但没有在 DOM 中创建额外的字段。这似乎是我遵循试剂形式文档的原因：

模板被热切地评估，你应该总是像上面的例子那样调用辅助函数，而不是把它们放在一个向量中。当调用绑定字段来编译模板时，这些将被试剂组件替换。

就我对试剂的理解而言，这意味着 in 中的原子在inputfields被调用时被取消引用bind-fields。然而，返回的组件不再包含原子的任何引用，因此不会在原子更改时重新渲染。

有没有办法使用试剂表格来获得表格绑定以及我正在寻找的输入的反应性创建和删除？

提前谢谢了

奥利弗

4

0 回答 0