react-hook-form V7 将注册道具传递给自定义字段

问题描述

我想通过传入 react-hook-form 的 props 来创建一个带有新注册方法的自定义输入，我每次都有相同的消息：

TypeError: path.split 不是函数

https://gyazo.com/414ea28dbe2b016e5b0739660efdc84b

我的自定义输入

function Field({
    name,register,placeholder,type,value,onChange,defaultValue,errors,children
}){
    return(
        <Form.Group>
            <Form.Label htmlFor={name}>{children}</Form.Label>
            <Form.Control
                size="lg"
                placeholder={placeholder}
                type={type ? type : "text"}
                id={name}
                // name={name}
                value={value}
                onChange={onChange}
                {...register({name})}
                defaultValue={defaultValue}
            />
            {errors && <span className="text-danger">{errors.message}</span>}
        </Form.Group>
    );
}

以及我调用自定义输入的表单部分：

const {register,formState : { errors },handleSubmit} = useForm({
        mode: "onTouched",resolver: yupResolver(schema),});
...
<Field
  name="login"
  register={register}
  errors={errors.login}
>
...

解决方法

从 migration guide 到 v7：

自定义注册

您将不再需要自定义名称属性 注册，您可以直接提供输入的名称。

- register({ name: 'test' })
+ register('test')

看起来 react-hook-form 正在尝试拆分名称字符串，以防您有嵌套字段：

'test.0.nested'.split('.')

但是在新版本中，您应该提供一个字符串而不是具有 name 属性的对象，因此：

{ name: 'test.0.nested' }.split('.')

抛出错误。