如何使用带有链接按钮的 checkValidity？

Question

我有一个表单，其中按钮是一个链接（带有“to”属性），我正在使用 checkValidity() 来使用必需的属性，但是如果我使用 to={{pathname...}} 它会更改为链接而不进行验证

这是我的表格：

<Form id="form">
   <Input required /* ... */></Input>
   <Button type="submit" onClick={this.send} tag={Link}
       to={{pathname: '/accomodations', 
       param: this.state.param}}> 
   </Button>
</Form>

这是验证码：

send(){
   var $myForm = $('#form');

   if(! $myForm[0].checkValidity()){
       $myForm[0].reportValidity()
   }
}

如果我从按钮中删除“tag={Link}”，它会进行验证，但不会更改路径

如果它有“tag={Link}”，它会更改为路径名而无需验证

有人可以帮忙吗？

Answer 1

您使用的是哪个 UI 框架/工具包？

Link 是从react-router 导入的吗？ (react-router-dom)

首先，在你的 react 组件中使用 jQuery 可能不是一个好主意。

如果表单无效，您应该能够停止活动：

- send() {
+ send(e){
    var $myForm = $('#form');

    if(! $myForm[0].checkValidity()){
+      e.preventDefault();
       $myForm[0].reportValidity()
    }
 }

在您的表单中，您应该为其分配一个 ref 并使用它来代替 jQuery：

- <Form id="form">
+ <Form ref={form => this.form = form}>

你可以在sendthis.form.current.checkValidity()

这一切都假设您使用的是类组件。在函数组件中，您无权访问 ref，但您可以使用 useRef 挂钩来创建 refs。

---

我会重构这个组件，并将disabled={!this.state.isFormValid} 添加到Button 组件中。您可以创建一个函数，在表单中的任何字段更改时更新this.state.isFormValid。

这是一个如何工作的示例 https://codesandbox.io/embed/lingering-snowflake-p483o