Question

我正在创建一个页面，使用om-boostrap显示，然后编辑，租用信息。（我知道Clojure，但对CLJS / Om / React /现代Web开发很新。）显示和编辑租户信息之间的UI和功能类似 - 都可以使用输入字段;编辑只需要字段为“文本”而不是“静态”，需要“提交”和“取消”按钮。

我面临的问题是我无法弄清楚改变这样的组件的React / Om方式。视图定义如下：

(defcomponent view [{:keys [id] :as app} owner]
  (render
   [_]
   (let [tenant (get @tenants id)]
     (dom/div
      (om/build header/header-view app)
      (dom/div {:class "h3"} "View Tenant\t"
               (utils/button {:on-click (fn []
                                          (om/update-state! owner
                                                            #(assoc app :edit? true))
                                          (om/refresh! owner))}
                             "Edit"))
      (om/build tenant-info {:edit? (:edit? app)
                             :tenant {:id id
                                      :name "Funny name"
                                      :unit-addr "Funny addr"
                                      :rent "Lots of rent"}})))))

我不会在这里粘贴整个tenant-view函数，但是它使用om-bootstrap为每个租户数据字段构建Bootstrap输入：

. . .
(let [input-type (if edit? "text" "static")]
    (i/input {:ref "name-display"
              :type input-type
              :label "Tenant Name"
              :label-classname "col-xs-2"
              :wrapper-classname "col-xs-4"
              :value (str name)})
    . . .)

我尝试了多种方法。我发布了最新版本，使用按钮的:on-click功能来修改应用状态，将edit?属性设置为true并提示重新渲染以使输入可编辑。< / p>

这不起作用，我在React或Om文档中找不到指导。

以不同方式呈现相同组件的正确方法是什么？（在我的例子中，view函数的输入字段。）
React或Om文档的相关内容是什么？

更新：当我将edit?标记硬编码为true时，我可以将输入设置为可编辑，因此输入可编辑不是问题：问题是从{{1切换转到static（可能反之亦然）。

Answer 1

是的，问题与理解应用状态和组件状态之间的差异有关。在这种情况下，我们希望影响应用程序状态，我不太了解您的情况，但我认为最好使用组件本地状态。您可以使用init-state或:state。并且您可以根据需要使用om/update-state!。但是，只需添加上一个答案，就可以更轻松地使用om/update!来影响您方案中的应用状态。

(utils/button {:on-click #(om/update! app [:edit?] true)}
                         "Edit")

是另一种选择，您可以将关键字向量尽可能深入到地图中。

这更简洁但可能会导致JS控制台警告，因为我们忽略event中的on-click。

Answer 2

我认为问题在于您使用om/update-state!来转换组件本地状态而不是om/transact!，它用于更新传递给组件的道具。因此，请尝试将按钮组件更改为：

(utils/button {:on-click (fn []
                             (om/transact! owner #(assoc app :edit true)))}
                             "Edit")

ClojureScript，Om和Om-Bootstrap：单击按钮，使输入可编辑

2 个答案: