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

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

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

单击编辑->清空该字段->然后单击保存->它将引发错误->然后单击取消。

在取消点击我想要错误应该 go 离开

工作代码代码框

Answer 1

一个简单的模式是您在 state 中设置错误并清除错误 object 到 null 的值，或者在单击取消按钮或键入有效输入时为空。 在这里，您可以初始化错误并在单击取消按钮时重置。 因此，每次更改输入值或单击取消按钮时，您都应该更新错误。

Answer 2

存在错误是因为它们由useForm管理。 该钩子暴露了一个 function reset ，应该可以解决您的问题。 这是一个利用 function 的 示例。

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

// ...

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