React Forms优化

如何解决React Forms优化

    import React,{ useState,useMemo,useCallback,useEffect } from "react";

    
    const Register = () => {
      const [form,setForm] = useState({
        fName: "",lName: "",email: "",password: "",country: "",});
      const [errors,setError] = useState({});
      const [contact,setContact] = useState();
    
      const schema = {
        fName: Joi.string().min(10).required().label("First Name"),lName: Joi.string().min(10).required().label("Last Name"),email: Joi.string().min(10).required().label("Email"),password: Joi.string().min(10).required().label("Password"),country: Joi.string().required().label("Country"),};
    
      const handleContact = useCallback((contact) => {
        setContact(contact);
      },[]);
    
      const handleSubmit = (e) => {
        e.preventDefault();
      };
    
      const handleChange = ({ target: input }) => {
        const { name } = input;
        const errors = validation(input,schema);
        const newFormState = { ...form };
        newFormState[name] = input.value;
        setForm(newFormState);
        setError(errors);
      };
    
      return (
        <form onSubmit={handleSubmit}>
          {console.log("Rendered")}
          <Input
            fullWidth={true}
            variant="outlined"
            id="fName"
            name="fName"
            label="First Name"
            value={form.fName}
            onChange={handleChange}
            error={errors ? errors.fName : null}
          />
    
          <Input
            fullWidth={true}
            variant="outlined"
            id="lName"
            name="lName"
            label="Last Name"
            value={form.lName}
            onChange={handleChange}
            error={errors ? errors.lName : null}
          />
    
          <Input
            fullWidth={true}
            variant="outlined"
            id="email"
            name="email"
            label="Email"
            value={form.email}
            onChange={handleChange}
            error={errors ? errors.email : null}
          />
    
          <Input
            fullWidth={true}
            placeholder="Password"
            variant="outlined"
            id="password"
            name="password"
            type="password"
            label="Password"
            value={form.password}
            onChange={handleChange}
            error={errors ? errors.password : null}
          />
    
          <DropDown
            fullWidth={true}
            name="country"
            label="Country"
            options={["Pakistan","India","USA"]}
            onChange={handleChange}
          />
    
          <PhoneInputField onChange={handleContact} />
          <ButtonComponent
            color="primary"
            disabled={validate(form,schema)}
            variant="contained"
          >
            Register
          </ButtonComponent>
        </form>
      );
    };
    
    export default Register;

如何停止重新提交整个表格？输入是一个自定义组件，作为导出默认的备忘录（输入）包装在备忘录中。现在，如果我开始在电子邮件输入字段中输入内容，其他2个也会重新呈现。这是因为在每次更新时，handleChange的引用都会更新，这会导致重新呈现输入字段。我已经尝试将handleChange包装在useCallBack中，但是没有运气，因为表单状态是它的依赖关系，并且每次更改时，handleChange的引用最终都会被更新。