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，它可以自行处理很多事情，例如验证和其他工作，如果您愿意的话，请查看

提交React后清除表格

1 个答案: