2

我的 React App 在表单标签上有 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 对象和其他方法变得简单并看起来很专业？

4

4 回答 4

4

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

  1. 按输入名称保存字段值的单个状态对象
  2. 单个更改处理程序来处理状态更新中的合并
  3. 为输入分配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>
  );
}

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

const fieldData = [
  {
    name: 'data1',
    type: 'text',
  },
  // etc...
];

...

<form onSubmit={handleSubmit}>
  {fieldData.map(({ name, type }) => (
    <input
      key={name{
      type={type}
      value={formData[name]}
      name={name}
      onChange={handleChange}
    />
  ))}
  <button type="submit">Submit</button>
</form>
于 2020-11-11T04:18:13.103 回答
3

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

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

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

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

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

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

最后，在您的渲染函数中映射表单字段。

{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', type: 'text', initialValue: '1' },
  { name: 'field2', type: 'text', initialValue: '2' },
  { name: 'field3', type: 'text', initialValue: '3' },
  { name: 'field4', type: 'text', initialValue: '4' },
  { name: 'field5', type: 'text', initialValue: '5' },
];

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

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

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

  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>
  );
}
于 2020-11-11T04:20:44.670 回答
1

在 react 中使用表单是开发应用程序时要解决的最具挑战性的问题之一。使用表单的最佳方式是react-hook-form. 引入它是为了极大地提高 React 应用程序的性能或延迟。在 react 中创建表单的另一种方法是 Formik。
Formik 和 React Hook Form 都解决了同样的问题（提供了一种在本地状态中存储表单数据的方法），但是 React Hook Form 是一种创建带有不受控制的组件的表单的方法，并且钩子允许它提供比福米克。

我会给你一个 react-hook-form 的简单例子。

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 是在 react 中创建表单的最佳方式。Formik 让您轻松理解并一次性创建表单。

其他人给出了在不使用 formik 和 react hook 表单的情况下创建 react 表单的最佳示例。

于 2020-11-11T04:38:09.930 回答
0 
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

于 2020-11-11T04:15:12.843 回答