如何解决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('.')
抛出错误。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。