如何将 checkValidity 与 link 按钮一起使用？

Question

我有一个带有按钮的表单，该按钮是 link（具有 'to' 属性）并且我正在使用 checkValidity() 来使用必需的属性，但是如果我使用 to={{pathname...}} 它更改为 link 没有进行验证

这是我的表格：

<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 导入的吗？ (反应路由器-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()

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

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

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

如何将 checkValidity 与 link 按钮一起使用？

How to use checkValidity with a link button?

javascript

html5-validation

reactjs