时间戳

首页 > 解决方案 > React hook表单文件上传，文件长度为0，提交后所有字段都被重置，除了选择选项

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

问题描述

  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。同样在提交时，在“makePayment”中，文件长度显示为 0，并且除了 Select 之外的每个字段都在提交后重置选项字段。我在这个中使用了反应钩子形式的 npm 库。选择重置没有发生，文件上传不起作用。

标签： reactjsreact-hooksreact-hook-form

解决方案

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

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

推荐阅读