如何使用 Kotlinx.html 为按钮创建 onClick 函数？

如何解决如何使用 Kotlinx.html 为按钮创建 onClick 函数？

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

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

class TempStackOverflow(): 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

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

解决方法

不幸的是，您完全忽略了 kotlinx.html 库的要点。它只能为你呈现 HTML，它不应该是动态的 kotlin->js 桥，如 Vaadin 或 GWT。因此，您只需将 <input v-if="personnel.departmentID" type="text" class="form-control" v-model="personnel.departmentID.name" :key="personnel.departmentID.name" /> </form> </div> </template> 函数转换为 String 的结果设置为 clicked 按钮的属性，该属性是有效的 onClick，因为 kotlin.Unit 是函数的默认返回值，如果您不这样做直接指定其他类型。

kotlin.Unit

与

相同

    fun clicked() {
        counter++
    }

和一样

    fun clicked():Unit {
        counter++
    }

因此，当您将“${clicked()}”设置为某个属性时，它实际上会执行函数（您的计数器在此处递增）并返回 Koltin.Unit 值，当它在内部呈现时就变成了“Kotlin.Unit”字符串“${}”模板