Javascript 在react中创建表单的最佳方法是什么？

我是英语初学者。我有以下代码：

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>
    );
}

import React，{useState，useffect}来自“React”；
从“react bootstrap”导入{Card，Form，Button}；
从“Axios”导入Axios
导出函数StudentForm（{student，onSuccess，onError，setState}）{
常量url=`http://localhost:9899/api/StudentData`;
const intialStudent={Firstname:''，Middlename:''，Lastname:''，DOB:''，Gender:''}；
常量[学生，设置学生]=使用状态（初始学生）；
useffect（（）=>{
设置学生（学生？学生：初始学生）；
}，[学生]；
const SaveData=函数（studentData）{
如果（学生身份证）{
post（url，{…studentData}，{头：{'accept'：'application/json'}）
。然后（res=>{
设置状态（空）；
成功（res）；
})
.catch（错误=>{
警报（“编辑数据时出错”）；
});
}
否则{
post（url，studentData，{headers:{'accept'：'application/json'}）
。然后（res=>{
设置状态（空）；
成功（res）；
})
.catch（err=>onError（err））；
}
}
返回(
{学生？“编辑”：“添加”}学生
{e.preventDefault（）；保存数据（学生）；}>
{setStudent（{…Student，Firstname:e.target.value}}}/>
setStudent（{…Student，Middlename:e.target.value}）}/>
setStudent（{…Student，姓氏：e.target.value}）}/>
setStudent（{…Student，DOB:e.target.value}）}/>
setStudent（{…学生，性别：e.target.value}）}/>
提交
);
}

---

在上面的代码中，我在每个字段上设置更改事件的状态。因此，当我更改任何字段时，它会一次又一次地呈现。如果它是大型表单，那么重新呈现可能需要很多时间，那么有没有更好的方法来创建以处理这种情况，或者有没有将表单与react一起使用的最佳实践？

在react中管理表单是一项复杂到足以将其委托给库的任务。 Alo，大表单不是功能组件的好选择，因为您概述的问题。当然，您可以花时间对其进行调整，但我认为这种努力可能不值得

我个人的建议是尝试许多react表单库中的一个。我个人喜欢的是

如果您想自己管理表单，我建议您将表单封装在有状态组件上，并在需要时使用key属性以便于重置

---

另一种选择是使用memonization，例如使用react.memo。但除非您的数据具有正确的形状，否则这并不能保证成功。这意味着，可以在它们之间进行比较的简单值，而不是数组、函数或对象。

所有onchange只能使用一个函数。像这样,

<Form.Group>
  <Form.Control
     type="text"
     name="Firstname"
     placeholder="Firstname"
     value={Student.Firstname}
     onChange={handleChange} 
  />
</Form.Group>

这是你的国家

const [values, setValues] = useState({
  Firstname: "", 
  Middlename: "", 
  Lastname: "",
  DOB: "",
  Gender: ""
})

---

我认为这种方法更有效，代码更少。

当输入发生更改时，您必须重新呈现表单，但当您确保onChange函数不会在每次呈现时更改引用，并且您的输入是纯组件时，您不需要重新呈现每个输入（对功能组件使用React.memo，对类组件使用React.PureComponent继承）

下面是一个优化输入的示例

const{
使用效果，
使用回调，
useState，
备忘录，
useRef，
}=反应；
函数App（）{
返回；
}
//把第一个学生放在这里，这样它就不会改变引用并退出过梁
//有效使用
常量初始值学生={
名字：''，
中间名：“”，
};
函数StudentForm（{student}）{
const[Student，setStudent]=使用状态（initialStudent）；
//useCallback，因此不会重新创建onChange并导致重新呈现
//没有改变的组件的数量
const onChange=useCallback(
（键，值）=>
setStudent（student=>（{…student，[键]：值}）），
[]
);
useffect（（）=>{
设置学生（学生？学生：初始学生）；
}，[学生]；
const SaveData=函数（studentData）{
console.log（'保存数据：'，studentData）；
};
返回(
{
e、 预防默认值（）；
保存数据（学生）；
}}
>
提交
);
}
//使其成为纯组件（如果没有更改，则不会重新渲染）
const InputContainer=memo（函数InputContainer({
类型，
名称
占位符，
价值
一旦改变，
stateKey，
}) {
呈现常量=useRef（0）；
rendered.current++；
返回(
{rendered.current}次渲染。
//将状态键和新值传递给onChange
onChange（stateKey，例如target.value）
}
/>
);
});
ReactDOM.render（，document.getElementById（'root'）；

好问题，顺便说一句，如果不再次渲染表单，您将无法看到表单中反映的更改。因此，这是唯一的方法，即在onchange事件中更新表单。顺便说一句，根据某种方法可以计算出表单的大小。您已经完成了类似的wrt渲染操作，即在每次输入更改时，整个表单都将被渲染。

const [values, setValues] = useState({
  Firstname: "", 
  Middlename: "", 
  Lastname: "",
  DOB: "",
  Gender: ""
})