Question

我有一个表单夹点按钮是一个链接（具有'to'属性），并且我正在使用checkValidity（）使用必需的属性，但是如果我使用to={{pathname...}}，它会更改为链接而无需进行验证< / p>

这是我的表格：

<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()
    }
 }

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

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

在send中，您可以进行this.form.current.checkValidity()

所有这些都假设您正在使用类组件。在功能组件中，您无权访问引用，但可以使用useRef钩子来创建引用。

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

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

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

1 个答案: