javascript - 单击取消按钮时如何消除错误

Question

我有一个表单，其中逻辑地显示编辑、保存和取消按钮，因此最初编辑按钮可见，所有输入均被禁用，当我单击编辑时，我使保存和取消按钮可见，但不编辑可见。

因此，在用户单击“保存”时填写一些数据后，我会检查必填字段等验证，因此如果出现错误，用户可以看到。

然后，如果用户不想保存，则单击编辑后，我会将站点中的数据填充为初始值，但是如果单击保存时出现错误，并且我单击取消，则错误仍然存​​在不会消失，

我做错了什么

当我将表单数据填写为初始值时，我认为点击。

如果上述观点正确，那么为什么错误仍然可见

我的代码

import React, { useState, useEffect } from "react";
import "./styles.css";
import { useForm } from "react-hook-form";

// mock for useQuery
const useQuery = query => {
  const [loading, setIsLoading] = useState(true);
  const [data, setData] = useState({});
  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
      setData({ firstname: "steve", lastname: "smith" });
    }, 1000);
  }, []);
  return { loading, data };
};

export default function App() {
  const { register, handleSubmit, errors } = useForm();
  const [disabled, setdisabled] = useState(true);
  const [editBtn, seteditBtn] = useState(true);
  const [initialData, setinitialData] = useState({});
  const { loading, data } = useQuery("some qraphql query here"); // getting data from graphql
  const [formData, setFormData] = useState({});

  useEffect(() => {
    setFormData(data);
    setinitialData(data);
  }, [data]);

  const edit = () => {
    setdisabled(false);
    seteditBtn(false);
  };
  const cancel = () => {
    setFormData(initialData);
    setdisabled(true);
    seteditBtn(true);
  };
  const onSubmit = () => {
    console.log(formData);
     };

  const handleChange = e => {
    const name = e.target.name;
    const value = e.target.value;
    console.log(name, value);
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  return (
    <div className="container-fluid">
      <form onSubmit={handleSubmit(onSubmit)}>
        {editBtn === true && (
          <div align="right">
            <button
              className="btn white_color_btn"
              type="button"
              onClick={edit}
            >
              Edit
            </button>
          </div>
        )}
        {editBtn === false && (
          <div>
            <button className="btn white_color_btn" type="submit">
              Save
            </button>
            <button
              className="btn white_color_btn"
              type="submit"
              onClick={cancel}
            >
              Cancel
            </button>
          </div>
        )}

        <div className="row">
          <div className="form-group col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
            <input
              type="text"
              id="firstname"
              name="firstname"
              onChange={handleChange}
              value={formData.firstname}
              disabled={disabled}
              ref={register({ required: true })}
            />
            {errors.firstname && (
              <span className="text-danger">first name required</span>
            )}
            <br />
            <label htmlFor="emp_designation">First name</label>
          </div>
          <div className="form-group col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
            <input
              type="text"
              id="lastname"
              name="lastname"
              value={formData.lastname}
              onChange={handleChange}
              disabled={disabled}
              ref={register({ required: true })}
            />
            {errors.lastname && (
              <span className="text-danger">last name required</span>
            )}
            <br />
            <label htmlFor="lastname">Lastname</label>
          </div>
        </div>
      </form>
    </div>
  );
}

要检查问题，请遵循以下几点

点击编辑 -> 清空字段 -> 然后点击保存 -> 它将抛出错误 -> 然后点击取消。

取消点击后我希望错误消失

Working code codesandbox

Answer 1

出现这些错误是因为它们是由 useForm 管理的。该钩子(Hook)公开了一个函数 reset这应该可以解决你的问题。这是一个example利用该功能。

const { register, handleSubmit, reset, errors } = useForm();

// ...

const cancel = () => {
  setFormData(initialData);
  setdisabled(true);
  seteditBtn(true);
  reset();
};