0

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、入力を編集可能にするために再レンダリングを促す最新のものを投稿しました。

これは機能せず、React または Om のドキュメントにガイダンスが見つかりません。

  1. 同じコンポーネントを異なる方法でレンダリングする正しい方法は何ですか? (私の場合、view関数の入力フィールドです。)
  2. どの React または Om ドキュメントが関連していますか?

edit?更新:フラグをにハードコードすると、入力を編集可能にすることができるので、入力を編集可能にすることtrueは問題ではありませstaticんtext。

4

2 に答える 2

1

はい、問題はアプリの状態とコンポーネントの状態の違いを理解することに関係しています。この場合、アプリの状態に影響を与えたいと考えています。シナリオはよくわかりませんが、これにはコンポーネントのローカル状態を使用する方がよいと思います。init-stateまたはを使用できます:state。そして、あなたは好きなように使うことができますom/update-state!。ただし、前の回答に追加するだけom/update!で、シナリオのアプリの状態に影響を与えるために使用する方が簡単になります。

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

キーワードのベクトルを好きなだけマップの奥深くに配置できるもう 1 つのオプションです。

eventこれはより簡潔ですが、 fromを無視するため、JS コンソールの警告が発生する可能性がありon-clickます。

于 2016-08-24T14:00:54.030 に答える
0

問題は、コンポーネントに渡された小道具を更新するために使用されるom/update-state!のではなく、コンポーネントのローカル状態を移行するために使用していることだと思います。om/transact!ボタンコンポーネントを次のように変更してみてください。

(utils/button {:on-click (fn []
                             (om/transact! owner #(assoc app :edit true)))}
                             "Edit")
于 2015-12-20T10:49:10.873 に答える