避免表格被重置

Question

我正在尝试 react-hook-forms。提交时是否有不重置表单的方法？每次我点击提交表单都会重置。

从 "react" 导入 React；从 "react-hook-form";

导入 { useForm }

import {
  Row,
  Col,
  Card,
  CardHeader,
  CardBody,
  Form,
  FormGroup,
  Label,
  Input,
  Button
} from "reactstrap";

const Insights = props => {
  const { register, handleSubmit, watch } = useForm();

  const GetSearchForm = () => {
    const timePickerStyle = { width: 96, important: "true" };

    const onSearch = data => {
      console.log(data);
    };

    return (
      <Form onSubmit={handleSubmit(onSearch)}>
        <Row>
          <Col>
            <FormGroup>
              <Label for="exampleEmail">Account Id</Label>
              <Input
                type="number"
                name="account"
                id="account"
                placeholder="AccountId"
                innerRef={register}
              />
            </FormGroup>
          </Col>
          <Col>
            <FormGroup>
              <Label for="examplePassword">Email</Label>
              <Input
                type="email"
                name="email"
                id="email"
                placeholder="Email"
                innerRef={register}
              />
            </FormGroup>
          </Col>

          <Col>
            <FormGroup>
              <Label for="exampleEmail">xPage Id</Label>
              <Input
                type="number"
                name="xpageid"
                id="xpage"
                placeholder="xPage Id"
                innerRef={register}
              />
            </FormGroup>
          </Col>
          <Col>
            <FormGroup>
              <Label for="examplePassword">Content Devider Id</Label>
              <Input
                type="number"
                name="contentdevider"
                id="contentdeviderid"
                placeholder="Content Devider Id"
                innerRef={register}
              />
            </FormGroup>
          </Col>
          <Col>
            <FormGroup>
              <Label for="examplePassword">Custom Page Id</Label>
              <Input
                type="number"
                name="custompage"
                id="custompageid"
                placeholder="Custom Page Id"
                innerRef={register}
              />
            </FormGroup>
          </Col>
          <Col>
            <FormGroup>
              <Label for="examplePassword">Service</Label>
              <Input
                type="text"
                name="servicename"
                id="servicename"
                placeholder="Custom Page Id"
                innerRef={register}
              />
            </FormGroup>
          </Col>
        </Row>

        <Row>
          <Col xs="4">
            <FormGroup>
              <Label for="exampleDate">Date</Label>
              <Row>
                <Col xs="8">
                  <Input
                    type="date"
                    name="date"
                    id="exampleDate"
                    placeholder="date placeholder"
                    innerRef={register}
                  />
                </Col>
                <Col xs="3">
                  <Input
                    style={timePickerStyle}
                    type="time"
                    name="time"
                    id="exampleTime"
                    placeholder="time placeholder"
                    innerRef={register}
                  />
                </Col>
              </Row>
            </FormGroup>
          </Col>
          <Col xs="4">
            <FormGroup>
              <Label for="exampleDate">Date</Label>
              <Row>
                <Col xs="8">
                  <Input
                    type="date"
                    name="date"
                    id="exampleDate"
                    placeholder="date placeholder"
                    innerRef={register}
                  />
                </Col>
                <Col xs="3">
                  <Input
                    style={timePickerStyle}
                    type="time"
                    name="time"
                    id="exampleTime"
                    placeholder="time placeholder"
                    innerRef={register}
                  />
                </Col>
              </Row>
            </FormGroup>
          </Col>
        </Row>

        <Button>Submit</Button>
      </Form>
    );
  };

  return (
    <Row>
      <Col xs="12" lg="12">
        <Card>
          <CardHeader>
            <i className="fa fa-align-justify"></i> Insights
          </CardHeader>
          <CardBody>
            <GetSearchForm></GetSearchForm>
          </CardBody>
        </Card>
      </Col>
    </Row>
  );
};

export default Insights;

Answer 1

因为 GetSearchForm 是它自己的组件，所以每次 Insights 重新渲染时都会创建它。

你用 innerRef 调用了 register 函数，但是由于 Input 改变了，而且它不是同一个组件（新创建的），它被新注册，这重置了状态。

您可以将 useForm 移动到 GetSearchForm 并在提交时将数据传回或在 Insights 中内联整个表单。

避免表格被重置

Avoid form being reset

reactjs

react-hook-form