如何在 React RSUITE 库中重置表单?

Question

所以我正在使用r-suite react library，并且在表单重置时遇到问题

当我使用 use-Ref 钩子重置表单时，它给了我错误form-Ref.current.reset()不起作用

我也尝试form-ref.current = null但它由于某种原因不起作用

那么如何重置我的表格？

我在重置表单时遇到问题，看起来 r-suite 反应库无法让我重置表单

import React, { useState, useRef } from "react";
import {
Form,
FormGroup,
FormControl,
Button,
Container,
FlexboxGrid,
} from "rsuite";
import { quotationModel } from "../validation/validation";
const AddFormjsx = ({ addQuotation }) => {
const [val, setVal] = useState(undefined);
const formRef = useRef();
const handleVal = (e) => setVal(e);
const handleSubmite = (e) => {
console.log(e);
if (e) {
formRef.current.reset();
addQuotation(val);
}
};
return (
<Container style={{ marginTop: "2rem" }}>
<FlexboxGrid justify="center">
<Form
layout="inline"
model={quotationModel}
onChange={handleVal}
onSubmit={handleSubmite}
ef={formRef}
>
<FormGroup>
<FormControl
name="itemName"
placeholder="Item name"
style={{ width: 160 }}
/>
</FormGroup>
<FormGroup>
<FormControl
name="itemPrice"
placeholder="Item price"
style={{ width: 160 }}
/>
</FormGroup>
<FormGroup>
<FormControl
name="itemQuontity"
placeholder="Item Quontity"
style={{ width: 160 }}
/>
</FormGroup>
<Button type="submite">Add</Button>
</Form>
</FlexboxGrid>
</Container>
);
};
export default AddFormjsx;

Answer 1

问题出在这一行：ef={formRef}但应该ref={formRef}

替换：formRef.current.reset();formRef.current._reactInternals.child.stateNode.reset()，如果将其与模型验证一起使用，则还可以添加用于内部值重置的formRef.current.state.formValue = null，否则它将跳过它