DOM更新等待componentDidUpdate完成?

时间:2018-02-16 11:26:45

标签: javascript reactjs redux

我有一个显示确认框的组件。

确认框有两个按钮“是”和“否”,如果用户点击“是”,我调用一个actioncreator,然后在componentDidUpdate中调用服务器,如果用户点击“否”,我什么都不做。

我想确保在两次按键点击中立即关闭确认框。

但我注意到点击“是”按钮后,我的组件“ConfirmationBox”会在关闭之前等待componentDidUpdate完成。

function mapStateToProps(state) {
    return {
        showActionConfirmationModal: state.showActionConfirmationModal,
        buttonClickValue: state.buttonClickedValue
    };
}

@connect(mapStateToProps,
    {
        closeActionConfirmationModal,
        setButtonClickedValue
    }, undefined, {withRef: true})

export default class ConfirmationBox extends Component {

    componentDidUpdate(prevProps) {
        if (prevProps.showActionConfirmationModal && !this.props.showActionConfirmationModal) {
            if (this.props.buttonClickedValue) {
                // Call an actioncreator that makes a server call
            }
        }
    }

    @autobind
    closeConfirmationModal(value) {
        this.props.setButtonClickedValue(value);
        this.props.closeActionConfirmationModal();
    }

    @autobind
    renderConfirmationModal() {
        const {selectedAction, selectedRows} = this.props;

        const confirmationText = "Are you sure you want to take action";
        return (
            <ConfirmationBox
                iconClassName=""
                text={confirmationText}
                buttonOneText="No"
                buttonTwoText="Yes"
                onButtonOneClick={()=>this.closeConfirmationModal(false)}
                onButtonTwoClick={()=>this.closeConfirmationModal(true)}
            />
        );
    }

    render() {
        return (
            <div>
                {!!this.props.showActionConfirmationModal && this.renderConfirmationModal()}
            </div>
        );
    }
}

任何领导都表示赞赏。

谢谢!

0 个答案:

没有答案