javascript - React hook 表单handlesubmit 不起作用

Question

嘿，大家好，我遇到了一些问题， react Hook 表单句柄提交功能不起作用，问题是什么，您能帮忙吗？

const AccountTabs = ({ userDetail }) => {
  const { register, handleSubmit } = useForm();
  console.log(userDetail)

  const onSubmit = (data) => {
    alert(JSON.stringify(data));
    console.log(data)
  }
  return (
    <Fragment>
      <Card>
        <CardHeader className='border-bottom'>
          <CardTitle tag='h4'>İşletme Ayarları</CardTitle>
        </CardHeader>
        <CardBody className='py-2 my-25'>
          <div className='d-flex'>
            <div className='me-25'>
              <img className='rounded me-50' alt='İşletmeye ait logo ' height='100' width='100' />
            </div>
            <div className='d-flex align-items-end mt-75 ms-1'>
              <div>
                <Button tag={Label} className='mb-75 me-75' size='sm' color='primary'>
                  Yükle
                  <Input type='file' hidden accept='image/*' />
                </Button>
                <Button className='mb-75' color='secondary' size='sm' outline >
                  Sil
                </Button>
                <p className='mb-0'> JPG veya PNG türünde yükleme yapınız</p>
              </div>
            </div>
          </div>
          <Form className='mt-2 pt-50' onSubmit={(e) => { e.preventDefault(); handleSubmit(onSubmit) }} >
            <Row>
              <Col sm='6' className='mb-1'>
                <Label className='form-label' > Ad Soyadı  </Label>
                <Input defaultValue={userDetail.name} {...register("name", { required: true })} />
              </Col>
              <Col sm='6' className='mb-1'>
                <Label className='form-label' > Kullanıcı adı  </Label>
                <Input defaultValue={userDetail.username}  {...register("kullanici", { required: true })} />
              </Col>
              <Col sm='6' className='mb-1'>
                <Label className='form-label' > E-mail </Label>
                <Input type='email' defaultValue={userDetail.contact.email} {...register("email", { required: true })} />
              </Col>
              <Col sm='6' className='mb-1'>
                <Label className='form-label' >  İşletme Adı  </Label>
                <Input defaultValue={userDetail.companyName} {...register("companyName", { required: true })} />
              </Col>
              <Col sm='6' className='mb-1'>
                <Label className='form-label' > Telefon Numarası </Label>
                <Cleave
                  value={userDetail.contact.phone}
                  {...register("phone", { required: true })}
                  className='form-control'
                  options={{ phone: true, phoneRegionCode: 'TR' }}
                />
              </Col>
              <Col sm='6' className='mb-1'>
                <Label className='form-label' > Adres</Label>
                <Input defaultValue={userDetail.contact.address} {...register("address", { required: true })} />
              </Col>

              <Col className='mt-2' sm='12'>
                <input type='submit' className='me-1' value='Kaydet' />

              </Col>
            </Row>
          </Form>
        </CardBody>
      </Card>
    </Fragment>
  )
}

export default AccountTabs

表单可以提交，但 onSubmit 函数不起作用，这是什么问题，我第一次使用react-hook-form 库，表单可以提交，但 onSubmit 函数不起作用，这是什么问题，我第一次使用react-hook-表单库，表单可以提交，但 onSubmit 函数不起作用有什么问题我第一次使用react-hook-form库

Answer 1

handleSubmit 仅在验证成功时才会触发提交函数，因此请在提交表单(或处理验证)时查看是否填写了所有必需的数据。

const AccountTabs = ({ userDetail }) => {
  const { register, handleSubmit, formState } = useForm();
  console.log(userDetail)

  const onSubmit = (data) => {
    alert(JSON.stringify(data));
    console.log(data)
  }

  // formstate has the errors
  console.log(formState.errors);



  return (
    <Fragment>
       //code
    </Fragment>
  )
}

检查这个link用于验证