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

问题描述：

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

我面对的问题是我无法弄清楚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编译自举输入为每个租户数据字段：

. . . 
(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并提示重新呈现以使输入可编辑。

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

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

更新：我能得到的投入为可编辑时，我硬编码edit?标志true，所以使得输入编辑不是问题：问题的根源static切换到text（大概反之亦然）。

在使用css的视图变化方面你不能做很多事吗？我只是看着页面底部的'defui TodoItem' [这里]（https://github.com/swannodette/om-next-demo/blob/master/todomvc/src/cljs/todomvc/item .cljs）其中DN具有“已完成”和/或“正在编辑”并且来自该状态的类。 –

我假设“提交”和“取消”按钮切换：编辑？属性返回false以指示记录未被编辑（并且不应该是可编辑的字段）。您可能想要的另一件事是在不处于编辑模式时在输入字段上设置“禁用”属性 - 这将确保人们在选择编辑之前不能尝试编辑字段值。显然，当他们点击编辑时，你需要删除禁用的属性 –

Chris，我会仔细看看这个例子，看看它是否展示了我正在寻找的东西。提姆X，是的，这是我想要的 - 但正如我所说，我面临的问题是输入字段没有被设置为“文本”（允许编辑）。输入上的“静态”类型使输入显示为常规文本，从而防止编辑。 – MonkeyWithDarts

答

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

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

答

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

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

是另一种选择，您可以根据需要将关键字矢量深入到地图中。

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

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

相关推荐