我有一个显示确认框的组件。
确认框有两个按钮“是”和“否”,如果用户点击“是”,我调用一个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>
);
}
}
任何领导都表示赞赏。
谢谢!