在 clojurescript / 试剂 / reagi 中跟踪鼠标？答案

【问题标题】：Tracking mouse in clojurescript / reagent / reagi?在 clojurescript / 试剂 / reagi 中跟踪鼠标？
【发布时间】：2017-02-21 01:30:40
【问题描述】：

我正在尝试通过一个简单的绘图程序来掌握 clojurescript 中的试剂。

我正在寻找一个示例，说明如何使用 Reagi 以原则性的“FRP”风格访问鼠标位置。

在各种试剂示例中，我可以看到如下所示的内容：

[:p [:onmousemove (fn (evt) ...)]]

将处理程序附加到 DOM 的元素。

为了让 Reagi “行为”，我想写这样的东西：

(def mouse-positions (r/behavior ( ... )))

但是如何将这两者结合起来，以便我添加到 DOM 元素的处理程序提供 Reagi 行为？

其次，由于我正在使用试剂，我希望这些 DOM 节点能够定期重新创建。大概我还需要继续将事件处理程序重新绑定到 Reagi 流。我如何确保这一点？

干杯

【问题讨论】：

标签： clojurescript reagent

【解决方案1】：

我想知道 Reagi 的事件流是否更适合。大致如下：

(defonce mouse-events (r/events {:x 0 :y 0}))

(defn home-page []
  [:div {:onMouseMove (fn [event]
                        (r/deliver mouse-events {:x (.-clientX event)
                                                 :y (.-clientY event)}))}])

然后，您可以使用 @mouse-events 取消引用事件流。您不必担心必须重新绑定到事件流，因为它包含对它的引用。

但是，请记住，将值推送到 Reagi 流不会导致 Reagent 重新渲染直接引用它的节点。为此，您将需要某种试剂原子。

如果您正在创建绘图应用程序，我想您的状态/原子将存储在其他地方，而您 swap! 或 reset! 会导致渲染发生。

另外，请注意，行为和事件都只包含对最新值的引用，这对于绘图应用程序可能并不理想。还有 Reagi 的 buffer 可能会对此有所帮助。

【讨论】：