KotlinJS结合React开发时获取TextArea组件输入值失效问题求助

• 你当前代码存在三处核心问题：
  1. 属性调用错误：代码中读取的nodeValue是DOM节点的原生文本属性，textarea的用户输入值存储在value属性中，这是取值为null的直接原因。
  2. 类型强转错误：textarea对应的DOM类型是HTMLTextAreaElement，你此前尝试强转为HTMLInputElement类型不匹配，无法正确读取属性。
  3. 受控组件逻辑缺失：你绑定了textarea的value为状态变量mess，但未在onChange回调中更新状态，会导致textarea内容无法跟随输入变化。

注意：Kotlin JS的类型系统要求必须显式强转事件目标为对应DOM元素类型，才能访问专属属性，不可省略强转步骤

修正后的完整代码如下：

val chat = fc<ChatProps> { props ->
    val (mess, setMess) = useState("")

    div("flex flex-row bg-gray-400 m-4 py-2 px-1 mt-auto") {
        textarea(classes = "bg-transparent border-transparent w-full h-full border-opacity-0 " +
                "scrollbar-hide w-full h-full") {
            attrs.value = mess
            attrs.onChange = {
                // 将事件目标强转为正确的textarea DOM类型
                val textAreaTarget = it.target as HTMLTextAreaElement
                // 读取输入值
                val inputValue = textAreaTarget.value
                console.log(inputValue)
                // 更新状态保证受控组件正常运行
                setMess(inputValue)
            }
        }
    }
}

如果你习惯使用currentTarget获取事件目标，执行同样的强转操作后读取value属性即可。

内容的提问来源于stack exchange，提问作者Nikola-Milovic