如何为带有 Kotlinx.html 的按钮创建 onClick 函数？

Question

我正在使用 Kotlin 的 html 库 kotlinx.html 进行动态 html 构建。

我想创建一个点击时触发功能的按钮。这是我当前的代码：

class TempWhosebug(): Template<FlowContent> {
    var counter: Int = 1

    override fun FlowContent.apply() {
        div {
            button(type = ButtonType.button) {
                onClick = "${clicked()}"
            }
        }
    }

    fun clicked() {
        counter++
    }
}

这将产生以下源代码：

<button type="button" onclick="kotlin.Unit">testkotlin.Unit</button>

点击时出现此错误（来自 Chrome 开发者控制台）：

Uncaught ReferenceError: kotlin is not defined at HTMLButtonElement.onclick

我尝试了几次批准，并寻找解决方案 - 但找不到合适的文档。

Answer 1

不幸的是，您完全忽略了 kotlinx.html 库的要点。它只能为你呈现 HTML，它不应该是动态的 kotlin->js 桥，比如 Vaadin 或 GWT。所以，你只需要将 clicked 函数转换为字符串的结果设置为 onClick 按钮的属性，这是有效的 kotlin.Unit，因为 kotlin.Unit 默认为 return 一个函数的值，如果你不直接指定另一个类型的话。

    fun clicked() {
        counter++
    }

与

相同

    fun clicked():Unit {
        counter++
    }

与

相同

    fun clicked():Kotlin.Unit {
        counter++
    }

因此，当您将“${clicked()}”设置为某些属性它实际上执行函数（您的计数器在此处递增）和 return Koltin.Unit 值，这当它呈现在“${}”模板

中时，它变成了“Kotlin.Unit”字符串

Answer 2

我不是 Kotlin 专家，但完全可以使用 kotlinx 编写事件处理程序。而不是：

onClick = "${clicked()}"

你试过用这个吗？

onClickFunction = { clicked() }

如何为带有 Kotlinx.html 的按钮创建 onClick 函数？

How do I create the onClick function for a button with Kotlinx.html?

html

kotlin

ktor

kotlinx

kotlinx-html