React-hook-form v7 - 自定义输入警告功能组件不能被赋予参考

Posted 2023-04-14

【中文标题】React-hook-form v7 - 自定义输入警告功能组件不能被赋予参考

【英文标题】：React-hook-form v7 - Custom input warning Function components cannot be given refs

【发布时间】：2021-09-16 20:40:43

【问题描述】：

我正在将 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

表单有效，但错误困扰着我。尽管我在互联网上搜索无果，但我无法删除它......

非常感谢！

【问题讨论】：

***.com/questions/64786916/…

根据我的理解，您确定您的输入已正确注册，并且错误消息，来自...register() 的ref 不会在没有@987654330 的情况下转发到您的Input 组件@。可能值得在Input 组件中注销您作为rest 获得的内容？我的假设是它不会有ref

你好@andymccullough，确实通过记录...rest我只有onChange和onBlur，没有参考。不知道是不是正常...其实我是按照React-hook-form的doc来的。

是的，因为 ref 和 key 被视为不传递给孩子的特殊道具，为了将 ref 转发给孩子，您必须用 forwardRef 明确告诉它- reactjs.org/docs/forwarding-refs.html，正如您在回答中看到的那样

【参考方案1】：

您可以合并您的 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);

【参考方案2】：

好吧，我不知道为什么我第一次没有成功，但是通过向我的组件添加一个 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/>
   [...]
)