KotlinJS react-hook-form 库，注册元素

Question

大家好，我尝试使用 Dukat 和 Wrappers 让 react-hook-form 与 KotlinJS 一起工作，这就是我得到的。

（包装器工作正常，尝试在控制台中记录它，它确实是库中的 useForm）

这就是我尝试使用 useForm 挂钩的方式

  val useForm = useForm<ProfileModel>()

    val register = useForm.register
    val errors = useForm.formState.errors
    val handleSubmit = useForm.handleSubmit

    val registerInstagram = register("instagram", object : validateOptions<ProfileModel, Any> {
        override var required = true
        override var maxLength = 40
    })

        form(classes = "") {
            attrs.onSubmit = {
                it.preventDefault()
                console.log("Submit")
                handleSubmit({ data, ev ->
                    console.log("On Submit " + data)
                }, { errors, ev ->
                    console.log("On submit error " + errors)
                })
            }


            input(type = InputType.text,
                classes = "$defaultInputStyle mb-4") {
                attrs.placeholder = "Name"

                register("name", object : validateOptions<ProfileModel, Any> {
                    override var required = true
                    override var maxLength = 15
                })
            }

            input(type = InputType.text,
                classes = "$defaultInputStyle mb-4") {
                this.ref = registerInstagram.ref
                attrs {
                    this.placeholder = "Instagram"
                    this.onChange = registerInstagram.onChange
                    this.onBlur = registerInstagram.onBlur
                    this.name = registerInstagram.name
                }
            }

            button(classes = defaultButtonStyle, type = ButtonType.submit) {
                +"Submit"
            }

        }
    }

useForm 确实有效，它为我提供了所有正确的值，如寄存器、错误等，但我无法将它正确连接到 Kotlinjs 中的输入元素。

注册 returns 以下内容，我编辑了界面以适应 React DOM 的属性，因为在常规的 React 表单挂钩中你会使用 <Input (...register) 这将适用所有这 4 个元素。

external interface UseFormRegisterReturn {
    var onChange: ChangeEventHandler<*> // I changed this
    var onBlur: FocusEventHandler<*> // I changed this
    var ref: RefCallback<*> //I changed this
    var name: InternalFieldName
}

当我点击提交时，我打印了提交，但是来自 useForm 的 handleSubmit 不是运行并且没有数据被打印。不确定我还能用这个设置做什么。

这是其余的相关包装代码

@JsName("useForm")
external fun <TFieldValues : FieldValues> useForm(props: `T`<TFieldValues> = definedExternally): UseFormReturn<TFieldValues, Any>


external interface UseFormReturn<TFieldValues : FieldValues, TContext : Any?> {
    var watch: UseFormWatch<TFieldValues>
    var getValues: UseFormGetValues<TFieldValues>
    var setError: UseFormSetError<TFieldValues>
    var clearErrors: UseFormClearErrors<TFieldValues>
    var setValue: UseFormSetValue<TFieldValues>
    var trigger: UseFormTrigger<TFieldValues>
    var formState: FormState<TFieldValues>
    var reset: UseFormReset<TFieldValues>
    var handleSubmit: UseFormHandleSubmit<TFieldValues>
    var unregister: UseFormUnregister<TFieldValues>
    var control: Control<TFieldValues, TContext>
    var register: UseFormRegister<TFieldValues>
    var setFocus: UseFormSetFocus<TFieldValues>
}

基本上，我想知道如何将 useForm 注册到我的元素中。

编辑：有些事你必须做

 div("w-screen h-screen items-center justify-center p-4") {
        form(classes = "") {
            attrs.onSubmit = {
                it.preventDefault() 1)

                handleSubmit({ data, ev ->
                    console.log("On Submit ", data)
                }, { errors, ev ->
                    console.log("On submit error ", errors)
                })(it) 2)
            }

            input(type = InputType.text,
                classes = "$defaultInputStyle mb-4") {
                this.ref = registerInstagram.ref
                attrs { 3)
                    this.placeholder = "Instagram" 
                    this.onChange = registerInstagram.onChange
                    this.onBlur = registerInstagram.onBlur
                    this.name = registerInstagram.name
                }
            }

            button(classes = defaultButtonStyle, type = ButtonType.submit) {
                +"Submit"
            }

防止默认（如果您不想刷新页面）
函数 handleSubmit RETURNS 需要事件作为其参数的函数。这对我来说是缺失的，你需要调用 handleSubmit()()
应用从注册函数、onBlur、名称 onChange 和 ref 返回的所有内容

这至少发送了数据，但验证和错误还没有发生

Answer 1

好的，这是包含工作错误和所有内容的完整答案，希望这会对某人有所帮助。

  val useForm = useForm<ProfileModel>()

    val register = useForm.register
    val errors = useForm.formState.errors.asDynamic()
    val handleSubmit = useForm.handleSubmit

    val registerName = register("name", js("{required: 'Name is required', maxLength: {" +
            "value: maxNameLength , message:'Max length for a name is ' + maxNameLength}}"))

    div("w-screen h-screen items-center justify-center p-4") {
        form(classes = "") {
            attrs.onSubmit = {
                it.preventDefault()

                handleSubmit({ data, ev ->
                    console.log("On Submit ", data)
                }, { errors, ev ->
                    console.log("On submit error ", errors)
                })(it)
            }

            input(type = InputType.text,
                classes = "$defaultInputStyle mb-4") {
                this.ref = registerName.ref
                attrs {
                    this.placeholder = "Name"
                    this.onChange = registerName.onChange
                    this.onBlur = registerName.onBlur
                    this.name = "name"
                }
            }

            if(jsTypeOf(errors.name) !== "undefined" ) {
                val text = errors.name.message.toString()
                p("ml-3 text-sm text-red-600 -mt-2 mb-2") {
                    +text
                }
            }

            input(classes = defaultButtonStyle, type = InputType.submit) {
            }

防止默认（如果您不想刷新页面）
函数 handleSubmit RETURNS 需要事件作为其参数的函数。这对我来说是缺失的，你需要调用 handleSubmit()()
应用从注册函数、onBlur、名称 onChange 和 ref 返回的所有内容

为了使错误起作用，我必须将错误转换为 Dynamic，对于错误消息，我必须首先检查该字段是否存在错误，如果它确实显示错误 p .我遇到的一个问题是你不能直接使用 errors.name.message 但我不得不将它添加到一个变量并将它转换为一个字符串。

为了验证，我将 register 的第二个参数更改为 dynamic，现在我只传递 js({whatever options I need}) no autocomplete 之类的，但是 JS 编译器会在编写时检查错误，写起来非常简单，所以不应该摆姿势一个问题。

编辑：目前唯一缺少的是在将此库与 Typescript 一起使用时，它会警告您在使用 useForm<Type

时缺少 IDE 中的某些字段

KotlinJS react-hook-form 库，注册元素

KotlinJS react-hook-form library, registering elements

reactjs

kotlin

kotlin-multiplatform

kotlin-js