javascript - 在反应中创建表格的最佳方法是什么？(What is best way to create forms in react?)

Question

I am beginner in react.(我是初学者。)

I have following code:(我有以下代码：) 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> ); } In above code I am setting state on change event on each field.(在上面的代码中，我在每个字段上的更改事件上设置状态。) So it will render again and again when I change any of the field.If it is large form so it may take a lot of time to re-render so is there a better way to create to handle this kind of situation, or any best practices for using forms with react?(因此，当我更改任何字段时，它将一次又一次地进行渲染。如果格式较大，则重新渲染可能会花费很多时间，因此有没有更好的方法来创建来处理这种情况，或者是否有最好的方法使用带有React的表单的实践？)   ask by rushang panchal translate from so

Answer 1

You can use only one Function for all onChanges.(您只能对所有onChanges使用一个功能。)

Looks like this;(看起来像这样；) <Form.Group> <Form.Control type="text" name="Firstname" placeholder="Firstname" value={Student.Firstname} onChange={handleChange} /> </Form.Group> And this is your handleChange function;(这是您的handleChange函数；) const handleChange = e => { const {name, value} = e.target setValues({...values, [name]: value}) } This is your state;(这是你的状态；) const [values, setValues] = useState({ Firstname: "", Middlename: "", Lastname: "", DOB: "", Gender: "" }) I think this way is more effective with less code.(我认为这种方式用更少的代码更有效。)