reactjs - 我的 onclick 函数与提交处理程序重叠

Question

当我放置 onClick 事件时，表单不验证，如果我删除 onClick 事件，表单不想提交

所以最近我刚开始用剑道反应的新项目。在这个项目中，我尝试创建自定义网格，我可以在其中添加新行、编辑或删除。

<form style={{ width: '1000px' }} onSubmit={this.handleSubmit} >
                    <div className="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                        <div className="k-animation-container">
                            <DropDownList
                                defaultValue={this.state.productInEdit.Programto || ''}
                                onChange={this.onDialogInputChange}
                                name="Programto"
                                required={true}
                                data={this.prog}
                            />
                        </div>
                    </div>
                </div>
                <div className="row" >
                    <DialogActionsBar>
                        <Button
                            className="k-button"
                            onClick={this.props.cancel}
                        >
                            Cancel
                            </Button>
                        <Button className="mt-3" type="submit" primary={true} onClick={this.props.save} > Save </Button>

                    </DialogActionsBar>
                </div>
            </form>

这是验证事件

handleSubmit = (event) => {
    event.preventDefault();
    this.setState({ success: true });
    setTimeout(() => { this.setState({ success: false }); }, 3000);
}        

并提交代码我在不同的页面上创建它，所以我需要用 this.props.save 调用事件；

save = () => {
    const dataItem = this.state.productInEdit;
    const products = this.state.products.slice();

    if (dataItem.ProductID === undefined) {
        products.unshift(this.newProduct(dataItem));
    } else {
        const index = products.findIndex(p => p.ProductID === dataItem.ProductID);
        products.splice(index, 1, dataItem);
    }

    this.setState({
        products: products,
        productInEdit: undefined
    });


}

我试图在 handleSubmit 中调用保存事件但仍然无法正常工作

标签： reactjs