javascript - 在反应中创建表单的最佳方法是什么?
问题描述
我是反应的初学者。我有以下代码:
import React, { useState, useEffect } from 'react';
import { Card, Form, Button } from 'react-bootstrap';
import Axios from 'axios'
export function StudentForm({ student, onSuccess, onError, setState }) {
const url = `http://localhost:9899/api/StudentData`;
const intialStudent = { Firstname: '', Middlename: '', Lastname: '', DOB: '', Gender: '' };
const [Student, setStudent] = useState(intialStudent);
useEffect(() => {
setStudent(student ? student : intialStudent);
}, [student]);
const SaveData = function (studentData) {
if (student._id) {
Axios.post(url, { ...studentData }, { headers: { 'accept': 'application/json' } })
.then(res => {
setState(null);
onSuccess(res);
})
.catch(error => {
alert('Error To Edit data');
});
}
else {
Axios.post(url, studentData, { headers: { 'accept': 'application/json' } })
.then(res => {
setState(null);
onSuccess(res);
})
.catch(err => onError(err));
}
}
return (
<Card>
<Card.Header><h5>{student ? "Edit" : "Add"} Student</h5></Card.Header>
<Card.Body>
<Form onSubmit={(e) => { e.preventDefault(); SaveData(Student); }}>
<Form.Group><Form.Control type="text" name="Firstname" placeholder="Firstname" value={Student.Firstname} onChange={e => { setStudent({ ...Student, Firstname: e.target.value }) }} /></Form.Group>
<Form.Group><Form.Control type="text" name="Middlename" placeholder="Middlename" value={Student.Middlename} onChange={e => setStudent({ ...Student, Middlename: e.target.value })} /></Form.Group>
<Form.Group><Form.Control type="text" name="Lastname" placeholder="Lastname" value={Student.Lastname} onChange={e => setStudent({ ...Student, Lastname: e.target.value })} /></Form.Group>
<Form.Group><Form.Control type="date" name="DOB" placeholder="DOB" value={Student.DOB} onChange={e => setStudent({ ...Student, DOB: e.target.value })} /></Form.Group>
<Form.Group><Form.Control type="text" name="Gender" placeholder="Class" value={Student.Gender} onChange={e => setStudent({ ...Student, Gender: e.target.value })} /></Form.Group>
<Button variant="primary" type="submit">Submit</Button>
</Form>
</Card.Body>
</Card>
);
}
在上面的代码中,我在每个字段的更改事件上设置状态。因此,当我更改任何字段时,它会一次又一次地渲染。如果它是大表单,那么重新渲染可能需要很长时间,所以有没有更好的方法来创建来处理这种情况,或者任何最好的使用带有反应的表单的做法?
解决方案
您只能对所有 onChanges 使用一个函数。看起来像这样;
<Form.Group>
<Form.Control
type="text"
name="Firstname"
placeholder="Firstname"
value={Student.Firstname}
onChange={handleChange}
/>
</Form.Group>
这是你的 handleChange 函数;
const handleChange = e => {
const {name, value} = e.target
setValues({...values, [name]: value})
}
这是你的状态;
const [values, setValues] = useState({
Firstname: "",
Middlename: "",
Lastname: "",
DOB: "",
Gender: ""
})
我认为这种方式用更少的代码更有效。
推荐阅读
- c# - 如何使用 System.Text.Json 将 double[,] 2d 数组序列化为 JSON?
- pine-script - Trading View Pine Script 如何计算入场总成本
- ios - 如何使用 Xcode 12 生成未签名的 IPA
- python - 如何总结列表中2个数字的减法?
- python - re.search() 和 re.match() 的结果相同,但比较运算符不同
- javascript - Electron/Node.js:从 REST 响应中提取文件并保存到本地磁盘
- shortcut - 如何在 Vimium 中将一个键重新映射到另一个键
- google-apps-script - 检查文件是否存在于特定文件夹中 - Google 表格
- javascript - 如何在 Azure 通信服务中使用 AzureLogger
- typescript - 如何在我的 Typescript 代码中导入 CheckboxChangeEvent