5

我正在用 Hiccup（和其他东西）在 clojure 中编写一个网络服务器应用程序。我正在尝试使用一个小 JS 启用和禁用两个下拉字段的复选框，但我无法使其工作。

[:head
[:script "function toggleText(cb, t1, t2) {
    document.getElementById(t1).disabled = !cb.checked;
    document.getElementById(t2).disabled = !cb.checked;
}"]]

[:td (hf/check-box {:on-change (str "toggleText(" (name endtag) "," (name tytag) "," (name tmtag) ")")} endtag)]
[:td (hf/drop-down tytag (range 2013 2031) 2017)]
[:td (hf/drop-down tmtag (range 1 13) 6)]
4

2 回答 2

2

on-change是一个 React 处理程序，不能在服务器端 HTML 中工作。

如果您不想创建单独的 JS 文件，可以使用onclick 属性：以下应该可以工作（假设该hf/check-box函数创建具有给定属性的元素）：

[:td (hf/check-box
      {:onclick (str "toggleText(" (name endtag) ","
                     (name tytag) "," (name tmtag) ")")}
      endtag)]
于 2017-07-05T22:33:02.420 回答
0

感谢 Aleph，您的修复以及为函数中的 cb 参数添加 getElementById 成功了！

该函数现在看起来像这样

[:script "function toggleText(cb, t1, t2) {
    document.getElementById(t1).disabled = !document.getElementById(cb).checked;
    document.getElementById(t2).disabled = !document.getElementById(cb).checked;}"]

我也简化了 Hiccup 代码（不将标签作为参数传递）所以它看起来像这样

[:td (hf/check-box {:onclick (str "toggleText('endtag','toyear','tomonth')")} :endtag (some? (:toyear m)))]
[:td (hf/drop-down :toyear (range 2013 2031))]
[:td (hf/drop-down :tomonth (range 1 13))]
于 2017-07-06T09:53:39.767 回答