提交后清除表单 反应.

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 高级表单，它可以自行处理很多事情，例如验证和其他东西，如果您愿意，请查看此内容