如何解决React-hook-form v7 - 自定义输入警告功能组件不能提供参考
我正在将 React-Hook-Form 从 v6 迁移到 v7,但我的自定义输入有一点问题。
这是我的父代码(表单):
<form onSubmit={handleSubmit(onSubmit)}>
<div className="row">
<div className="md-8">
<div className="form-group">
<Input
name="host"
label="Adresse host *"
error={errors.host}
{...register('host')}
/>
</div>
</div>
</div>
</form>
这里是孩子的代码:
import React from 'react'
type Props = {
name?:string
label?: string
error?: any
type?: string
placeholder?: string
helper?:string
}
const Input: React.FC<Props> = (props) => {
const {name,label,error,type,placeholder,helper,...rest} = props
return(
<div className="form-group inputText">
{label && <label htmlFor={name}>{label}</label>}
<input
type={type ?? "text"}
name={name}
placeholder={placeholder ?? ""}
className={`form-input ${error ? "form-error" : ''}`}
{...rest}/>
{!!helper && <small className="input-helper">{helper}</small>}
{error && <span className="input-error red" style={{marginBottom: 5}}>{error.type === "required" ? "Champs obligatoire" : error.message}</span>}
</div>
)
}
export default Input
表单有效,但错误困扰着我。尽管我在互联网上搜索无果,但我无法将其删除...
非常感谢!
解决方法
您可以合并您的 refs,然后将其传递给您,您可以使用第三方库(如 react-merge-refs
),也可以像下面的代码一样自行编写代码:
const mergeRefs = (...refs) => {
return value => {
refs.forEach(ref => {
if (typeof ref === 'function') ref(value);
else if (ref != null) ref.current = value;
});
};
};
那么你可以简单地使用这个功能,如下所示
mergeRefs(ref1,ref2);
,
好吧我不知道为什么我第一次没有成功,但是通过向我的组件添加一个 forwardRef 问题消失了...... 像这样:
const Input: React.FC<Props> = React.forwardRef((props,ref) => {
[...]
<input
type={type ?? "text"}
name={name}
placeholder={placeholder ?? ""}
ref={ref}
className={`form-input ${error ? "form-error" : ''}`}
{...rest}/>
[...]
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。