【问题标题】:Don't need to close the antd Modal after Clicking "Save and Add" Button and need to close after clicking "Save and Close"点击“保存并添加”按钮后不需要关闭antd Modal,点击“保存并关闭”后需要关闭
【发布时间】:2019-01-31 12:00:15
【问题描述】:

我正在使用 antd Modal。 我有两个按钮。

  • 保存并添加 - 单击此按钮时不想关闭模式。(这不起作用)
  • 保存并关闭 - 想要在单击此按钮时关闭模式。

但是,当单击两个按钮时,它正在关闭。我不需要那个

index.js

this.state = {
            isOpen: false,
}
handleCancel = () => {
        this.setState({isOpen:false});
    };
handleAddModal = () => {
        var self = this;
        this.setState({isOpen:true,isEdit:false,CompanyID:this.state.CompanyID,selectedItem:null,fields: {
            RegisterID: { value: '',},
            CustomerID: { value: '',},
            AccountID: { value: '',},
        }});  
    };
handleSave = (state) => {
        this.setState({
            isOpen:state.isOpen
        });
    };
<RegisterForm 
                showLoader={this.showLoader} 
                visible={this.state.isOpen} 
                />

RegisterForm.js

this.state={saveOrClose:false}
handleClear = () => {
        this.props.form.resetFields()
    };
    handleCancel = () => {
        this.props.handleCancel()
    };

handleSubmit = (e,isNewAdd) => {
        this.setState({saveOrClose:isNewAdd})
           let val = Object.assign({'CompanyID':this.props.CompanyID.value},values);
           this.props.actions.register.AddRegister(val);
           if(!isNewAdd){
           this.handleClear();
           this.props.handleSave(false);}

    });
  };
render(){
<Modal
                    visible={visible}
                    title=
                    "Register Form"
                    className="dialog-container"
                    onCancel={this.handleCancel}
                    footer={[
                        <Button className="save-btn" onClick={(event) => this.handleSubmit(event,true)} 
                        style={{'visibility' : this.props.RegisterID.value === '' ? 'visible' : 'hidden'}}>Save and Add </Button>,

                        <Button className="save-btn" onClick={(event) => this.handleSubmit(event,false)}>
                        {this.props.isEdit ?  "Save" :"Save and Close"  }</Button>, //Edit Button 

                        ]}>
}

我尝试通过在 Button 的 onClick 函数上传递布尔值来编写条件。

如何实际编写代码以获得所需的结果? 逻辑上有什么错误吗? 还有其他方法可以实现吗?

【问题讨论】:

  • 你能提供一个关于codesandbox的可重复的小例子吗?照原样,上面的代码不足以追踪您的问题。请从 fork 这个 ant 设计代码和框模板开始:codesandbox.io/s/wk04r016q8

标签: reactjs antd


【解决方案1】:
 handleSubmit = (e,isNewAdd) => {
        this.setState({saveOrClose:isNewAdd})
           let val = Object.assign({'CompanyID':this.props.CompanyID.value},values);
           this.props.actions.register.AddRegister(val);
           if(!isNewAdd){
           this.handleClear();
           this.props.handleSave(false);}

    });
  };

【讨论】:

  • 请更新代码,我没有在代码中看到 bool 标志起作用的地方,它没有在任何地方触发
  • 我更新我的答案,你Make setState,然后和state.saveOrClose比较,它不会起作用,因为setState是异步工作的
  • 还没醒
  • 根据您的回答更新了代码。但不工作
  • 请在上述代码@egorchik中找到更新后的代码
猜你喜欢
  • 1970-01-01
  • 2019-06-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-09-14
  • 2014-11-23
  • 1970-01-01
相关资源
最近更新 更多