React hook 表单文件上传，文件长度为 0，提交后所有字段都被重置，除了 select 选项

Question

  function Donate() {
      const {
        register,
        handleSubmit,
        watch,
        formState: { errors },
        reset,
      } = useForm();
      const makePayment = (data) => {
        console.log(data);
        reset();
      };
      return (
        <div>
          <Container>
            <Row>
              <Col sm={18} md={8} lg={8} className="mx-auto">
                <Form onSubmit={handleSubmit(makePayment)}>
                  <Form.Group className="mb-3" controlId="name">
                    <Form.Label>Name</Form.Label>
                    <Form.Control
                      type="text"
                      placeholder="Enter name"
                      {...register("name")}
                    />
                   
                  </Form.Group>
                  <Form.Group className="mb-3" controlId="email">
                    <Form.Label>Email address</Form.Label>
                    <Form.Control
                      type="email"
                      placeholder="Enter email"
                      {...register(
                        "email"
                       
                      )}
                    />
                    
                  </Form.Group>
                  <Form.Group className="mb-3" controlId="file">
                    <Form.Label>Image</Form.Label>
                    <Form.Control type="file" {...register("file")} />
                    
                  </Form.Group>
                  <Form.Group className="mb-3" controlId="pnumber">
                    <Form.Label>Phone Number</Form.Label>
                    <Form.Control
                      type="text"
                      placeholder="Enter phone number(without 0/+91)"
                      {...register("pnumber")}
                    />
                    </Form.Group>
                  <Form.Group controlId="studiesorjob">
                    <Form.Label>Doing Studies or Job</Form.Label>
                    <Form.Control
                      as="select"
                      {...register("studiesorjob")}
                    >
                      <option selected disabled></option>
                      <option value="studies">Studies</option>
                      <option value="job">Job</option>
                    </Form.Control>
                  </Form.Group>
                  <Form.Group className="mb-3" controlId="amount">
                    <Form.Label>Amount you'd like to donate</Form.Label>
                    <Form.Control
                      placeholder="Amount"
                      type="number"
                      min="1"
                      {...register("amount")}
                    />
                    
                  </Form.Group>
                  <Button variant="primary" type="submit">
                    Submit
                  </Button>
                </Form>
              </Col>
            </Row>
          </Container>
        </div>
      );
    }

Here, in this code I'm trying to make file upload along with other fields, but file length is showing 0. Also on submit, in "makePayment", file Length is showing 0, and every field is getting reset after submitting except Select option field. I am using react hook form npm library in this. Select reset is not happening and file upload is not working.

Answer 1

请移除表单提交事件的reset()调用，在api调用后添加reset调用，如提交表单，调用提交api ，然后在成功响应时，调用 reset();

此外，我不确定 <Form.Control type="file" {...register("file")} /> 您是否应该在此处添加 <Form.Control as="input" type="file" {...register("file")} />，可能这也是导致问题的原因。

React hook 表单文件上传，文件长度为 0，提交后所有字段都被重置，除了 select 选项

React hook form file upload, file length is 0 and after submit all fields are getting reset except select option

reactjs

react-hooks

react-hook-form