如何使用 react-hook-forms 在 React 中创建动态表单。

嗨，大家好，

如果您是 React 开发者，您可能知道在 React.js 中创建表单非常简单，但您需要对代码进行很多调整。我将介绍创建动态表单时需要了解的一些知识，并解释如何编写它们。

为什么使用动态表单？

如今，大多数大型科技公司（如谷歌、亚马逊、Netflix）都在其前端应用程序中使用动态表单，因为它们必须处理大量数据，而动态表单有助于创建以 API 数据形式接收模式的表单，这样我们就不必担心我们将在代码中设置的字段。
大多数大型应用程序应该使用动态表单的另一个原因是，我们构建的动态表单组件也可以作为其他组件的可重用组件。这有可能减少一半的代码。

可用于创建动态表单的库。

有许多库可以在 React 中创建动态表单，例如react-jsonchema-form、Formik、react-form、react final-form ，其中大多数库都被广泛使用，但我建议您使用react-hook-forms，原因如下。

几乎没有依赖性。
延迟非常低。
代码更少，因为它由钩子函数组成。

让我们开始吧

要在您的应用程序中安装 react-hook-form，请复制下面的行

npm install react-hook-form

为了查看更好的 UI，请尝试安装诸如 react-strap/bootstrap/material 之类的依赖项，我将在下面的示例中使用 react-strap。

要使用 react-hook-form，请按照以下代码操作。

import {useForm} from 'react-hook-form';
import {Card, CardBody, Form, Row, Button} from 'reactstrap';

const MainComponent=(props)=>{
let {register, handleSubmit, errors}=useForm();
}

在 Javascript 中创建 JSON 表单

创建一个组件，该组件返回一个模板，用于映射我们将要创建的表单中的字段。我们以员工的基本示例为例，您可以根据您的组件进行创建。


import React from 'react';

export const template = {
    title: 'Basic Form to Add Employee',
    Fields: [
        {
            name:'firstName' ,
            type:'text',
            title:'First Name',
            required:{
                value:true,
                message:'Employee First Name is required'
            },
            validation:function(val){
                return val.length >=5 || 'Min Length is 5';
            }
        },
        {
            name:'lastName' ,
            type:'text',
            title:'Last Name',
            required:{
                value:true,
                message:'Employee Last Name is required'
            },
            validation:function(val){
                return val.length >=5 || 'Min Length is 5';
            }
        },
    ]
};

您可以搜索并参考网络上可用的 JSON 表单。以便您可以了解有关模式的更多信息并为模板创建不同类型的字段。

创建 CustomForm 组件来呈现模板。

我们创建一个函数/方法来渲染字段并在返回组件时返回调用的方法。


import React from 'react';
import {Input, Label, FormGroup, FormText, FormFeedback, Row, Col} from 'reactstrap';



//for a select input type
const renderOptions=(options)=>{
    return options.map((child)=>{
        return(
            <option key={child.value} value={child.value}>{child.label}</option>
        );
    });
};





function CustomForm({ template, data, handleform}) {
let {register,errors} = handleform;
const renderFields = (fields) => {

        return fields.map(field => {
            let { type, title, name, required,validation} = field;


switch(type){
      case 'text':
    return (
        <FormGroup key={name}>
         <Label htmlFor={name}>
                  {title}
                  <span style={required?{color:'red'}:{}}>*</span> 
                 </Label>
                 <Input             
                  type='text'
                  name={name}                        
                  innerRef= 
               {register({required:required,validate:validation})}
                  />                             
                  {errors[name] && 
                  <FormFeedback>
                   {errors[name].message} 
                 </FormFeedback>}                   
              </FormGroup>
    );

     case 'select':
    let {options}=field;
    return (
      <FormGroup key={name}>
        <Label htmlFor={name}>{title}<span style={required?{color:'red'}:{}}>*</span></Label>
        <Input  
             type='select' 
             name={name} 
             innerRef={register}
        >

            {renderOptions(options)}
        </Input>
          </FormGroup>
    );

      default:
       return (
        <div>
          <span>Invalid Field</span>
               </div>
    );
      }
   });

};
let { title, Fields } = template;
    return (
        <>
            <h4>{title}</h4>
            <Row>
                <Col>
                    {renderFields(Fields)}
                </Col>
            </Row>
        </>

    );

}

您可以处理不同类型的案例并根据它呈现字段。

使用 react-hook-form 渲染 CustomForm 组件

useForm() 返回 Field 元素以自己的方式处理表单。

register方法允许您注册一个输入/选择 Ref 并将验证规则应用到 React Hook Form 中。
handleSubmit函数将在表单验证成功时传递表单数据，也可以远程调用。
error是一个对象，包含表单错误和与每个字段对应的错误消息。

您可以在文档中阅读更多相关信息

因此，在 App 组件或要呈现表单的任何组件中创建一个返回元素。


let handleform={
   register:register,
   errors:errors
};
return(
<Card>
 <CardBody>
  <Form onSubmit={handleSubmit(onSubmit)}>                  
   <Row className="d-flex justify-content-end">                     
     <Button                             
        type='submit'                            
        className="mt-0 mr-1"                            
        color="primary">                    
        Save Changes                        
      </Button>
      <CustomForm  
        template={template} 
        handleform={handleform}
       />
  </Form>
 </CardBody>
</Card>)

您可以将状态传递给先前构建的自定义表单中的道具。

结论

这样，您可以使用 react-hook-form 在 reactjs 中呈现动态表单，它还可以帮助您进行表单验证、模式和渲染。

如果您喜欢这篇文章，请与您的开发社区或极客朋友分享。

谢谢。

文章来源：https://dev.to/vineetpardhi/how-to-create-dynamic-forms-in-react-using-react-hook-forms-5gab