Question

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

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

在上面的代码中，我正在每个字段的更改事件上设置状态。因此，当我更改任何字段时，它将一次又一次地进行渲染。如果格式较大，则重新渲染可能会花费很多时间，因此有没有更好的方法来创建来处理这种情况，或者是否有最好的方法使用带有react的表单的实践？

Answer 1

您只能对所有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})
}

这是您的状态； </ p>

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

我认为这种方式用更少的代码更有效。

Answer 2

在react中管理表单是一项复杂的任务，足以将其委派给一个库。还是，大表格不是功能组件的理想选择，因为您概述了这些问题。您当然可以花时间进行调整，但是我认为付出的努力可能不值得。

我个人的建议是尝试使用众多反应形式库中的一种。我个人喜欢的一个是Formik

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

另一种替代方法是使用记忆，例如使用react.memo。但这不能保证成功，除非您的数据具有适当的形状。这意味着可以在它们自己之间而不是数组，函数，对象之间进行比较的简单值。

Answer 3

当输入改变时，您必须重新渲染表单，但是当您确保onChange函数不会在每个渲染器上更改引用并且您的输入是纯组件时，就不必重新渲染每个输入（使用React .memo作为功能组件，并从React.PureComponent继承为类组件。

这是优化输入的示例。

const {
  useEffect,
  useCallback,
  useState,
  memo,
  useRef,
} = React;
function App() {
  return <StudentForm />;
}
//put initial student here so it doesn't change reference and quits the linter
//  in useEffect
const initialStudent = {
  Firstname: '',
  Middlename: '',
};
function StudentForm({ student }) {
  const [Student, setStudent] = useState(initialStudent);
  //useCallback so onChange is not re created and causes re rendering
  //  of components that didn't change
  const onChange = useCallback(
    (key, value) =>
      setStudent(student => ({ ...student, [key]: value })),
    []
  );

  useEffect(() => {
    setStudent(student ? student : initialStudent);
  }, [student]);

  const SaveData = function(studentData) {
    console.log('saving data:', studentData);
  };
  return (
    <form
      onSubmit={e => {
        e.preventDefault();
        SaveData(Student);
      }}
    >
      <InputContainer
        type="text"
        name="Firstname"
        placeholder="Firstname"
        value={Student.Firstname}
        stateKey="Firstname" //provide state key
        onChange={onChange}
      />
      <InputContainer
        type="text"
        name="Middlename"
        placeholder="Middlename"
        value={Student.Middlename}
        stateKey="Middlename"
        onChange={onChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}
//make this a pure component (does not re render if nothing changed)
const InputContainer = memo(function InputContainer({
  type,
  name,
  placeholder,
  value,
  onChange,
  stateKey,
}) {
  const rendered = useRef(0);
  rendered.current++;
  return (
    <div>
      <div>{rendered.current} times rendered.</div>
      <input
        type={type}
        name={name}
        value={value}
        placeholder={placeholder}
        onChange={e =>
          //pass state key and new value to onChange
          onChange(stateKey, e.target.value)
        }
      />
    </div>
  );
});

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

在反应中创建表格的最佳方法是什么？

3 个答案: