提交 React 后清除表单

Question

在我的应用程序中，我正在制作一个表格来添加动物以供 React 收养。如果了解这一点很重要，数据将存储在 Mongo 中。

但我不知道怎么做，我试着看，但没有什么对我有用。也许表格有问题。如果有人能告诉我如何在提交后清除或重置表单，我将不胜感激。我简化了它，所以很容易看到我有什么。这是我的表格：

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { addAnimal } from "../redux/actions";

const AddAnimalForm = () => {
  const dispatch = useDispatch();
  const [name, setName] = useState("");
  const [kind, setKind] = useState("");
  const [displayForm, setDisplayForm] = useState(false);

  const dispatchAddAnimal = () => {
    dispatch(
      addAnimal(
        {
          name,
          kind
        },
        "_id  name kind sex age city author phone info"
      )
    );
  };

  const onShowButtonClicked = () => {
    setDisplayForm(true);
  };

  const onHideButtonClicked = () => {
    setDisplayForm(false);
  };

  return !displayForm ? (
    <button className="col-xs-12 col-md-3" onClick={onShowButtonClicked}>
      add
    </button>
  ) : (
    <React.Fragment>
      <div className="col-xs-12 col-sm-9">
        <button className="col-xs-12 col-md-3" onClick={onHideButtonClicked}>
          hide{" "}
        </button>
        <form>
          <div className="form-row">
            <div className="form-group col-md-6">
              <label htmlFor="animal-name">name</label>
              <input
                type="text"
                className="form-control"
                onChange={e => setName(e.target.value)}
                id="animal-name"
              />
            </div>
            <div className="form-group col-md-6">
              <label htmlFor="kind">kind</label>
              <input
                type="text"
                onChange={e => setKind(e.target.value)}
                className="form-control"
                id="kind"
              />
            </div>
          </div>
          <button
            type="button"
            className="btn btn-primary"
            onClick={dispatchAddAnimal}
          >
            add animal
          </button>
        </form>
      </div>
    </React.Fragment>
  );
};

export default AddAnimalForm;

Answer 1

在您导入的正下方的顶部定义一个变量

let exampleRef = React.createRef()

您好，首先您必须像这样创建对该表单的引用：-

<form ref={(el) => myFormRef = el;}>
  <input />
  <input />
  ...
  <input />
</form>

然后，在提交表单时，您只需使用表单引用提供的 reset() 方法，如下所示

 const dispatchAddAnimal = () => {
   myFormRef.reset();  
   dispatch(
    addAnimal(
      {
        name,
        kind
      },
      "_id  name kind sex age city author phone info"
    )
  );
 };

让我知道它是否适合你。

还有一个很棒的库React Advanced Form，它可以自己处理很多事情，比如验证和其他事情，如果你觉得有空，请检查一下