问题描述
我的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一样使用名称和值