如何在react rsuite库中重置窗体？

Question

所以我在使用r-suite react library时遇到了表单重置的问题

当我使用-Ref钩子重置表单时，它给我的错误是form-Ref.current.reset()不是函数

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

那么我如何重置我的表单呢？

我在重置表单时遇到了问题，看起来r-suite react库不能让我重置表单

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，否则将跳过它