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（大概反之亦然）。

來源

2015-12-12 MonkeyWithDarts

在使用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")

來源

2015-12-20 10:49:10 Leeondamiky

是的問題與理解應用程序狀態和組件狀態之間的差異有關。在這種情況下，我們希望影響應用程序狀態，但我不太瞭解您的情況，但我認爲使用組件本地狀態更好。您可以使用init-state或:state。您可以根據需要使用om/update-state!。但是，只需添加上一個答案，只需使用om/update!就可以在您的方案中影響應用程序狀態。

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

是另一種選擇，您可以根據需要將關鍵字矢量深入到地圖中。

這更簡潔但可能會導致JS控制檯警告，因爲我們忽略on-click的event。

來源

2016-08-24 14:00:54 urbanslug

ClojureScript，Om和Om-Bootstrap：單擊按鈕，使輸入可編輯

回答

相關問題