javascript - 如何将 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 路由器-dom)

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

如果表单无效，您应该能够停止事件:

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

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

在您的表单中，您应该为其分配一个引用并使用它而不是 jQuery:

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

在send中你可以执行this.form.current.checkValidity()

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

<小时/>

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

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