Go WASM中无法给js.Func绑定的onclick事件传递参数如何解决

错误原因 #

1. 用法逻辑错误：js.FuncOf(f) 返回的是可供JavaScript识别的函数对象，Invoke() 方法的作用是立即执行该函数，返回值是函数执行后的结果（你的示例中f返回nil）。你把函数执行结果赋值给按钮的onclick事件，相当于给onclick绑定了一个nil/undefined值，而不是事件触发时要执行的函数，完全不符合onclick需要接收函数引用的要求。
2. 运行时错误触发：你在Go代码执行到btn.Set这一行时就会立即执行Invoke，此时WASM的函数调用上下文和JS侧的WASM实例导出对象状态不匹配，直接触发了cannot read properties of undefined (reading 'exports')的运行时错误。
3. 参数遍历写法错误：你写的for x := range args 遍历拿到的x是参数的索引下标，不是参数本身的值，就算绑定正确也只会打印0、1这类索引数字，拿不到你传入的参数内容。

解决方案 #

方案1：用Go闭包预置参数（最常用） #

通过高阶函数生成携带自定义参数的事件处理函数，直接绑定生成的函数对象即可：

// 定义高阶函数，接收你要预置的自定义参数
func buildOnClickHandler(customMsg string) js.Func {
    return js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        // 直接使用外部传入的自定义参数
        println("自定义参数：", customMsg)
        // 遍历事件自带参数（第一个参数是点击事件对象）
        for idx, arg := range args {
            println("事件参数索引：", idx, "参数值：", arg.String())
        }
        return nil
    })
}

// 绑定事件，直接传入函数对象，不要调用Invoke
btn.Set("onclick", buildOnClickHandler("Hello World"))

方案2：调用JS原生bind方法预置参数 #

如果你需要使用JS原生的参数绑定逻辑，也可以调用函数对象的bind方法预置参数：

f := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
    // args[0] 是你预置的自定义参数，args[1]是点击事件对象
    println("自定义参数：", args[0].String())
    return nil
})
// bind第一个参数为this指向，后续参数为要预置的入参
boundF := f.Call("bind", js.Null(), js.ValueOf("Hello World"))
btn.Set("onclick", boundF)

内容的提问来源于stack exchange，提问作者Hasan A Yousef