1

我需要创建一个包含选择字段的表单，其中选项取决于当前可用的邮件帐户。页面加载后，我在 API 请求中检索这些邮件帐户。

以下函数使用 select 元素创建表单。

(defn create-options [mail-accounts]
  (for [m mail-accounts]
    [:option {:key (keyword (str (:id m)))
              :value (:id m)}
     (:name m)]))

(defn render-mail-account-select [mail-accounts]
  (let [form-state (r/atom {})]
    (fn [mail-accounts]
      (let [form [:form.mailing-form.form-horizontal
                  (into [:select.form-control {:field :list :id :mail-account}]
                        (create-options mail-accounts))]]
        (pprint form)
        [bind-fields form form-state]))))

这pprint给了我以下输出：

;; Before the mail-accounts are loaded
[:select.form-control {:field :list, :id :mail-account}]

;; After the state update containing the mail accounts
[:select.form-control
 {:field :list, :id :mail-account}
 [:option {:key :24, :value 24} "First mail account name"]
 [:option {:key :25, :value 25} "Second mail account name"]]

我的问题是我页面上的选择保持为空，就好像选择没有重新呈现一样。

附录

我想我忘了添加一些代码：我将此表单包装在一个 KIOO 组件中，我在其中取消引用我的state原子。

(defsnippet choose-account-panel "html/static-panel.html" [:div.panel]
  []
  {[:h4.panel-title] (content "3. Mail Account wählen")
   [:div.panel-body] (content [render-mail-account-select (:mail-accounts @state)])})

然后该组件调用我的render-mail-account-select函数，并应正确重新呈现表单。

4

2 回答 2

5

您需要取消对 Ratom for Reagent 的引用，以了解在该 Ratom 更改时需要再次调用哪些函数。取消引用需要在 内部的匿名函数render-mail-account-select或它调用的函数之一中发生。我在这里看不到任何取消引用？

有关Reagent 渲染的更多详细信息，请参阅此处的文档。

于 2015-10-22T19:51:05.227 回答
0

正如已经指出的，您的渲染函数必须引用状态原子中的某些内容才能知道何时需要重新渲染。但是，如果您还希望显示的表单选择“默认”值，则还需要设置状态原子。

bind-fields 调用会将您的表单与状态原子相关联。如果状态原子中没有任何内容，则表单将为“空白”，即没有选择任何元素。如果这是你想要的，那应该没问题。但是，如果您想要选择一个值，那么您应该将该值放入原子中。例如，如果您希望第一项已被选中，则将 :24 放入状态原子，即

(swap! form-state assoc :mail-account :24)

请注意，我不确定您的选项定义是否正确。文档似乎表明您只需要 :key 属性和该属性中的值（作为关键字）。我没有查看源来确认这一点，但没有一个示例也使用 :value 属性。

如果您在渲染函数的开头进行交换，则将引用状态原子，并且每次使用新参数调用组件时都应重新渲染。当我说“渲染函数”时，在这种情况下，我指的是匿名函数，而不是创建状态原子的外部函数。

于 2015-10-22T22:53:10.953 回答