Избегайте сброса формы

Question

Я пытаюсь реагировать на крючки. Есть ли способ не сбрасывать форму при отправке? Каждый раз, когда я нажимаю кнопку отправки, происходит сброс.

import React from "реагировать"; import {useForm} из "response-hook-form";

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

Простой способ избежать этого - вызвать ваш handleSubmit при нажатии Button, а не при заполнении формы:

<Form>
  // Other form entities

  <Button onClick={handleSubmit(onSearch)}>Submit</Button>
</Form>

Answer 2

Поскольку GetSearchForm является его собственным компонентом, он создается каждый раз, когда Insights перерисовывается.

Вы вызываете функцию register с помощью innerRef, но поскольку Input изменился, и это не тот же самый компонент (недавно созданный), он становится вновь зарегистрированным, что сбрасывает состояние.

Вы можете либо переместить useForm в GetSearchForm и передать данные обратно при отправке или в строке вся форма в Insights.