Блог

   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>
      );
    }
 

Здесь, в этом коде, я пытаюсь загрузить файл вместе с другими полями, но длина файла показывает 0. Также при отправке в разделе «Оплата» длина файла отображается 0, и каждое поле сбрасывается после отправки, за исключением поля Выбора опции. В этом я использую библиотеку npm-формы react hook.
Выберите сброс не происходит, и загрузка файла не работает.

Пожалуйста, удалите reset() вызов события отправки формы, добавьте вызов rest после вызова api, например, отправьте форму, вызовите api отправки, затем в случае успешного ответа вызовите reset() ;

Кроме того, я не уверен <Form.Control type="file" {...register("file")} /> , что здесь вам следует добавить <Form.Control as="input" type="file" {...register("file")} /> , может быть, это также вызывает проблему.