react-hook-form 提供了一种我从未见过的语法，我想知道它的名字答案

【问题标题】：react-hook-form provides a syntax that I've never seen before, I would like to know the name of thatreact-hook-form 提供了一种我从未见过的语法，我想知道它的名字
【发布时间】：2022-10-08 23:24:50
【问题描述】：

我想知道这是什么语法：

<input {...register("name")} />

【问题讨论】：

最好重新表述这个问题，因为我想了解当这个 register 函数用法在输入字段上被解构时发生了什么。如果您的问题是 {...} 运算符是什么，那么这就是扩展运算符 + 解构。它们是通用的 JavaScript 概念，并不是 react 独有的。
（为您编辑，但）请提供文本而不是图像的代码，以便可以搜索或复制。

标签： javascript reactjs react-hook-form

【解决方案1】：

来自 useForm 文档：https://react-hook-form.com/api/useform/register/

这称为对象解构.您可以在此处了解更多信息：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

解释

输入元素有很多属性，如 onChange、onBlur、name、ref... 等。

和登记函数，当通过传递参数调用时，返回我上面提到的所有这些属性。

所以这：

const { onChange, onBlur, name, ref } = register('firstName');

创建四个变量（const），稍后可以在我的元素中使用

<input 
   onChange={onChange}
   onBlur={onBlur}
   name={name}
   ref={ref}
/>

现在，假设我有一个函数可以打印 register('firstName') 拥有的所有值。

const printFunction = (onChangeParameter, onBlurParameter, nameParameter, refParameter) => {
    console.log(onChangeParameter, onBlurParameter, nameParameter, refParameter)
};

但我不想称它为一次提取每个变量，然后将其放入函数中（像这样）：

const { onChange, onBlur, name, ref } = register('firstName');
printFunction(onChange, onBlur, name, ref);

所以我只能破坏register('firstname') 在函数内部。

printFunction(...register('register'));

并且基本上得到相同的结果，但要快得多。

这就是输入元素中发生的事情。您正在调用一个返回多个内容的函数，并抓取其中的每一个并将其放入输入元素中。

【讨论】：

【解决方案2】：

register 方法可帮助您将输入字段注册到 React Hook 表单中，以便它可用于验证，并且可以跟踪其值的更改。

要注册输入，我们将 register 方法传递给输入字段，如下所示：

<input type="text" name="firstName" {...register('firstName')} />

https://blog.logrocket.com/react-hook-form-complete-guide/

【讨论】：

【解决方案3】：

register('fieldName')function 返回所有可以传递给您的字段元素的道具。所以在输入的情况下，它会返回name、value、onChange/onBlur/onFocus 等等（取决于你如何根据mode 给useForm 配置它们）。

如果您想在传递到 input 字段之前查看这些内容，您可以这样做。

const fieldProps = register('firstName');
console.log(fieldProps);
<input {...fieldProps}/>

【讨论】：

【解决方案4】：

react-hook-form 提供了一个 register 方法，它返回一个包含字段 onChange、onBlur、name 和 ref 的对象。您可以看到注册方法类型被描述为

register: (name: string, RegisterOptions?) => ({ onChange, onBlur, name, ref })

为了将您的输入控件连接到react-hook-form，您有两个选择。要么你使用速记方法

<input {...register('firstName')} />

在内部它将做的是：

<input 
  onChange={onChange} 
  onBlur={onBlur} 
  name={name}
  ref={ref}
/>

或者您可以手动从register 方法中获取返回值并将其添加到您的输入控件中，如下所示：

const { onChange, onBlur, name, ref } = register('firstName'); 
        
<input 
  onChange={onChange} // assign onChange event 
  onBlur={onBlur} // assign onBlur event
  name={name} // assign name prop
  ref={ref} // assign ref prop
/>

... 被称为扩展属性，顾名思义，它允许扩展表达式。你可以了解更多关于here

【讨论】：