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

时间:2019-02-19 07:51:20

标签: reactjs

当我放置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内调用保存事件,但仍然无法正常工作

0 个答案:

没有答案