使用 availity-reactstrap-validation，我在点击提交时 运行 一个 onClick 事件，这取消了实际的验证

Question

作为序言，我正在从头开始学习，所以请多多包涵。我已经尝试了几天来解决这个问题，这是我最后的选择（我喜欢尽可能自己尝试解决）。

我在 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>

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

             toggle = () => {
               this.setState({ modal: !this.state.modal });
             };

             handleSubmit = item => {
             this.toggle();
             if (item.id) {
               axios
                 .put(`http://localhost:8000/api/todos/${item.id}/`, item)
                 .then(res => this.refreshList());
               return;
           }
           axios
             .post("http://localhost:8000/api/todos/", item)
             .then(res => this.refreshList());
           };

render() {
  return( 

       ...

     {this.state.modal ? (
          <Modal
            activeItem={this.state.activeItem}
            toggle={this.toggle}
            onSave={this.handleSubmit}
          />
        ) : null}

    ...

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

非常感谢您的帮助！

Answer 1

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

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

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