Javascript 使用Availability reactstrap验证，我在点击submit时运行onClick事件，这将取消实际的验证

作为前言，我从零开始学习，所以请温柔一点。我已经试了几天来解决这个问题，这是我最后的选择（我喜欢尽可能自己解决）

我在Reactstrap模式中有以下代码（仅相关部分）：

Modal.js

                  const { toggle, onSave } = this.props;
                      return ( 
                         <ModalBody>
                          <AvForm> 
                           <AvGroup>
                            <Label for="description">Description</Label>
                            <AvInput
                                type="text"
                                name="description"
                                value={this.state.activeItem.description}
                                onChange={this.handleChange}
                                placeholder="Tool description"
                                required
                            />
                            <AvFeedback valid>
                                Looking good
                            </AvFeedback>
                            <AvFeedback>
                                Uh oh! Looks like a blank string
                            </AvFeedback>

and a button:

                            <Button onClick={() => onSave(this.state.activeItem)}>
                              Save
                            </Button>
                      </AvForm>
                     </ModalBody>

const{toggle，onSave}=this.props；
报税表（
描述
看起来不错
哦！看起来像一根空白的绳子
和一个按钮：
onSave（this.state.activeItem）}>
拯救

App.js （同样，我认为相关部分）

toggle=（）=>{
this.setState（{modal:！this.state.modal}）；
};
handleSubmit=项目=>{
this.toggle（）；
如果（项目id）{
axios
.放(`http://localhost:8000/api/todos/${item.id}/`，item）
.then（res=>this.refreshList（））；
返回；
}
axios
.post（“http://localhost:8000/api/todos/“，项目）
.then（res=>this.refreshList（））；
};
render（）{
报税表（
...
{this.state.modal(
)：null}
...

如果我删除onClick事件，表单验证将如您预期的那样工作。我只是不确定如何告诉它首先执行验证，如果通过，则继续提交，否则将显示验证警告并保持表单打开

---

非常感谢您的帮助！

尝试使用AvForm的onValidSubmit。根据文档，只有在提交时每个字段都有效时才会调用此回调：

handleSubmit(){
  onSave(this.state.activeItem)
}

<AvForm onValidSubmit={this.handleSubmit}>
...
</AvForm>

handleSubmit（）{
onSave（this.state.activeItem）
}
...

嘿，谢谢你。我使用了你的评论，似乎已经成功地将其用于：

onSave（this.state.activeItem）}>

谢谢！

handleSubmit(){
  onSave(this.state.activeItem)
}

<AvForm onValidSubmit={this.handleSubmit}>
...
</AvForm>