要实现一个保存时的React管理员确认对话框,可以按照以下步骤进行操作:
import React from "react";
class SaveConfirmationDialog extends React.Component {
render() {
return (
确认保存
您确定要保存更改吗?
);
}
}
export default SaveConfirmationDialog;
import React from "react";
import SaveConfirmationDialog from "./SaveConfirmationDialog";
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
showConfirmationDialog: false
};
}
handleSaveClick = () => {
this.setState({
showConfirmationDialog: true
});
};
handleConfirmSave = () => {
// 在这里执行保存操作
// ...
this.setState({
showConfirmationDialog: false
});
};
handleCancelSave = () => {
this.setState({
showConfirmationDialog: false
});
};
render() {
return (
{this.state.showConfirmationDialog && (
)}
);
}
}
export default ParentComponent;
在上述代码中,当点击保存按钮时,"handleSaveClick"方法会将"showConfirmationDialog"状态设置为true,从而显示对话框。当点击确定按钮时,"handleConfirmSave"方法会执行保存操作,然后将"showConfirmationDialog"状态设置为false,隐藏对话框。当点击取消按钮时,"handleCancelSave"方法会将"showConfirmationDialog"状态设置为false,隐藏对话框。
这样,就可以使用"SaveConfirmationDialog"组件来实现保存时的管理员确认对话框了。