在ReactJS中管理大量表单输入字段的专业方法是什么？

如何解决在ReactJS中管理大量表单输入字段的专业方法是什么？

我的React App在form标签上有20多个字段。和我的工作代码如下

function DriverForm() {
    const [formData1,setFormData1] = useState(1);
    const [formData2,setFormData2] = useState(2);
    const [formData3,setFormData3] = useState(3);
    const [formData4,setFormData4] = useState(4);
    const [formData5,setFormData5] = useState(5);

    const handleSubmit = (event) => {
        event.preventDefault();
    };

    return (
        <div className="wrapper">
            <form onSubmit={handleSubmit}>
                <input value={formData1} onChange={(e) => setFormData1(e.target.value)} />
                <input value={formData2} onChange={(e) => setFormData2(e.target.value)} />
                <input value={formData3} onChange={(e) => setFormData3(e.target.value)} />
                <input value={formData4} onChange={(e) => setFormData4(e.target.value)} />
                <input value={formData5} onChange={(e) => setFormData5(e.target.value)} />
                <button type="submit">Submit</button>
            </form>
        </div>
    );
}

如您所见，我的代码具有重复的代码，以声明输入字段状态变量，例如const [formData5,setFormData5] = useState(5); 在渲染功能中，onChange={(e) => setFormData1(e.target.value)}被重复了很多次。

通过使用json对象和其他对象，有什么方法可以使它看起来简单又专业？

解决方法

我想您可以通过组合重复的位使代码更干燥。

按输入名称保存字段值的单个状态对象
单个更改处理程序以处理状态更新中的合并
分配（Assign）输入Sub HideRows() Dim lRow As Long Dim rng As Range lRow = Cells(Rows.Count,"A").End(xlUp).Row For Each rng In Range("A2:A" & lRow) If rng.Value > rng.Offset(0,1).Value Then rng.EntireRow.Hidden = True End If Next rng End Sub属性，该属性将与更改事件一起传递

DRY解决方案

name

如果您提前知道输入类型是什么，可以将它们加载到配置数组中并映射它们

function DriverForm() {
  const [formData,setFormData] = useState({
    data1: 1,data2: 2,// etc...
  });

  const handleSubmit = (event) => {
    event.preventDefault();
    // handle formData
  };

  const handleChange = event => {
    event.preventDefault();
    const { name,value } = event.target;
    setFormData(formData => ({
      ...formData,[name]: value,}))
  }

  return (
    <div className="wrapper">
      <form onSubmit={handleSubmit}>
        <input value={formData.data1} name="data1" onChange={handleChange} />
        <input value={formData.data2} name="data2" onChange={handleChange} />        
        // etc..
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

这个问题有很多答案。但是，我喜欢编写的规则之一是“一切都是数组”。

我将从创建一个表单域数组开始。然后采用这些表单字段，并构建要在formData状态挂钩中使用的初始状态对象。

const formFields = [
  { name: 'field1',type: 'text',initialValue: '1' },{ name: 'field2',initialValue: '2' },{ name: 'field3',initialValue: '3' },{ name: 'field4',initialValue: '4' },{ name: 'field5',initialValue: '5' },];

const initalState = formFields.reduce(
  (acc,next) => ({ ...acc,[next.name]: next.initalValue }),{}
);

然后创建一个handleChange处理程序。

const handleChange = (name,value) => {
  setFormData({
    ...formData,});
};

最后，在您的渲染函数中映射formFields。

{formFields.map(({ name,type }) => (
  <input
    key={name}
    name={name}
    type={type}
    value={formData[name]}
    onChange={(e) => handleChange(e.target.value,name)}
  />
))}

完整代码：

const formFields = [
  { name: 'field1',{}
);

function DriverForm() {
  const [formData,setFormData] = useState(initalState);

  const handleChange = (name,value) => {
    setFormData({
      ...formData,});
  };

  const handleSubmit = (event) => {
    event.preventDefault();
  };

  return (
    <div className="wrapper">
      <form onSubmit={handleSubmit}>
        {formFields.map(({ name,type }) => (
          <input
            key={name}
            name={name}
            type={type}
            value={formData[name]}
            onChange={(e) => handleChange(e.target.value,name)}
          />
        ))}
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

在React中使用表单是开发应用程序时要解决的最具挑战性的问题之一。处理表单的最佳方法是react-hook-form。引入它是为了使React应用程序的性能或等待时间得到极大的扩展。在React中创建表单的另一种方法是Formik。
Formik和React Hook Form都解决了相同的问题（提供了一种以本地状态存储表单数据的方法），但是React Hook Form是一种创建具有不受控制的组件的表单的方法，并且该钩子使其具有比性能更好的性能结果。 Formik。

我给你一个简单的反应挂钩形式的例子。

import React,{useState} from "react";
import { useForm } from "react-hook-form";

function App() {
  const { register,handleSubmit } = useForm();
  const {data,setData} = useState({});
  const onSubmit = (formData) => {
     console.log(formData); // an object of form Data
     setData(formData);
  }   
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="formInput1" ref={register} />
      <input name="formInput2" ref={register} />
      <input type="submit" />
    </form>
  );
}

当我们控制台记录表单数据时，我们得到一个表单输入对象。

>console

object{
 formInput1: "your value",formInput2: "your 2nd value"
}

您可以通过API调用将该对象存储在本地状态或数据库中。

我建议您同时学习Formik和React钩子形式，然后才能区分它们。是的，react-hook-form是在性能方面创建表单的最佳方法。 Formik使您可以轻松地一次理解并创建表单。

其他人给出了创建不使用formik和react钩子表单的react表单的最佳示例。

import React,{ useState } from 'react'

const App=()=>{

    const[fullname,setFullName]=useState({
        fname:"",lname:"",email:"",phone:""
    }); 

    const inputEvent=(event)=>{
        // const value = event.target.value;
        // const name = event.target.name;
        const {name,value}=event.target;

        setFullName((preValue)=>{
            console.log(preValue)
            console.log(value)
            return{
                ...preValue,//gets the previous value
                [name]:value//sets the value to the field that is getting changed
            }
        })
    }

    const submits=(event)=>{
        event.preventDefault();
        alert('Form has been submitted')
    }
return(
    <>
    <div>
    <form onSubmit={submits}>
    <div>
    <h1>Hello {fullname.fname} {fullname.lname}</h1>
    <div className='container'>
    <p>{fullname.email}</p>
    </div>
    {/* <p>{fullname.phone}</p> */}
    <input type='text' 
    placeholder='Enter Your Name'
    onChange={inputEvent}
    name='fname'
    value={fullname.fname}
     />
    <input type='text' 
    placeholder='Enter Your Last Name'
    onChange={inputEvent}
    name='lname'
    value={fullname.lname}
     /> 
    <input type='text' 
    placeholder='Enter Your Email'
    onChange={inputEvent}
    name='email'
    value={fullname.email}
     /> 
    <input type='phone' 
    placeholder='Enter Your Phone Number'
    onChange={inputEvent}
    name='phone'
    value={fullname.phone}
     /> 
    <button type='submit'>Submit</button>
    </div>
    </form>
    </div>
    </>
)
};

export default App;

这种如何处理过多形式的输入的方式，您可以按所需的方式扩展

您应该做的是只需替换，就像formData1一样使用名称和值

在ReactJS中管理大量表单输入字段的专业方法是什么？

如何解决在ReactJS中管理大量表单输入字段的专业方法是什么？

解决方法

完整代码：

相关推荐