2

我想在单击按钮时修改表格的可见性，使用 clojurescript/javascript 互操作。

我试过了

{:on-click #(-> js/document                                               
 (.getElementById "db-search-result-tables")                                               
 (.-style)
 (.-display "block"))}

这是我调用它的 div 标签。

[:div {:style {
       :display "none"}
       :id "db-search-result-tables"
        :class "db-search-results-table"}
[table-to-display]

我也试过

(-> js/document                                               
 (.getElementById "db-search-result-tables")                                                
 (.-style)
 (.-display)
  (set! ""))

但它只是暂时显示表格，然后再次将显示设置为无。

4

2 回答 2

0

这是特定于重新框架的解决方案。我建议使用app-db来存储状态，使用 ahandler来更改状态并使用 asub来检索当前值。Re-frame 的 README 是了解此设置的绝佳资源：https ://github.com/Day8/re-frame

当它认为合适时，对 DOM 的直接更改将被 re-frame 覆盖（这就是为什么您的原始代码被恢复为原始组件定义的原因）。

设置潜艇/处理程序

你可以创建一个handler这样的：

(re-frame.core/reg-event-fx
  :handlers/enable-search-results
  (fn [{:keys [db]} _]
    {:db (assoc db :show-search-results? true})

和一个sub检索值：

(re-frame.core/reg-sub
  :subs/show-search-results?
  (fn [db]
    (:show-search-results? db))

更新代码以使用 subs / handlers

现在，更新您的搜索按钮以发送到handler：

[:button
  {:on-click #(re-frame.core/dispatch [:handlers/enable-search-results])}
  "Click to show search results"]

并根据以下内容将您的搜索结果 div 更新为可见/隐藏sub：

(let [show-search-results? @(re-frame.core/subscribe [:subs/show-search-results?])]
  [:div {:style {:display (if show-search-results? "visible" "none"}
         :id "db-search-result-tables"
         :class "db-search-results-table"}
    [table-to-display]])

或者：

(let [show-search-results? @(re-frame.core/subscribe [:subs/show-search-results?])]
  (when show-search-results?
    [:div {:id "db-search-result-tables"
           :class "db-search-results-table"}
      [table-to-display]]))

因为app-db状态是持久的，这正是像这样的“突变”可以安全控制的地方。

于 2019-07-11T07:48:57.873 回答
0

编辑：这个解决方案不假设任何库，基于阅读问题陈述没有明确提到任何库/框架，只是 JS 互操作，直接修改 DOM 一个 la jQuery。如果您使用任何库或任何 React 包装器（例如试剂），请不要使用此答案。

也许创建一个辅助函数会更容易，比如toggle通过 ID 隐藏/显示给定元素的显示？

(ns myproject.core)

(defn ^:export toggle [elem-id]
  (let [elem        (js/document.getElementById elem-id)
        style       (.-style elem)
        display     (.-display style)
        new-display (if (= "none" display) "block" "none")]
    (set! (.-display style) new-display)))

我们通过 id 找到元素，使用 var 获取当前样式，从样式中获取显示并计算 display 属性的新值，然后set!将其返回到显示中。

我使用了^:export元数据标签，以便可以直接从文档中调用该函数，如下所示：

    <div>
      <button onClick="myproject.core.toggle('details')">Toggle details</button>
    </div>

    <div id="details" style="display: none">
      Some details here. Some details here. Some details here. Some details here. 
    </div>
于 2019-07-06T01:24:49.587 回答