javascript - 如何在 Chakra UI 模态中将回调附加到 Google 选择器?
问题描述
我正在尝试将Google Picker集成到我的应用程序中,并且 UI 按预期完美显示,但我似乎无法让它调用我尝试附加到它的任何回调。
有两种使用 Picker 的方法,我更喜欢选项 1,但我都可以
选项 1:将 Picker 构建为 URL 以在自定义模式中呈现
我在 React(特别是 Chakra)中构建我的应用程序,我更喜欢使用 Chakra 的<Popover>
元素来帮助 Picker 与页面的其余部分融合。
使用这条路线,这是我到目前为止的相关代码:
function getPicker(callback) {
const view = new google.picker.DocsView(google.picker.ViewId.FOLDERS);
view.setSelectFolderEnabled(true);
return (
new google.picker.PickerBuilder()
.addView(view)
.setSelectableMimeTypes("application/vnd.google-apps.folder")
.setTitle("")
.setCallback(callback)
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.setOAuthToken(getAccessToken() /* defined elsewhere - assume this works */)
.setDeveloperKey(process.env.API_KEY)
.setOrigin(window.location.host)
.toUri();
);
}
// This is an event listener
function showPicker() {
function handleFolderSelected(folder) {
const { Response, Action, Document } = google.picker;
if (folder[Response.ACTION] === Action.PICKED) {
const targetFolder = folder[Response.DOCUMENTS][0][Document.ID];
// do stuff
}
setIsFolderPickerOpen(false); // closes the <Popover>
}
const pickerUrl = getPicker(handleFolderSelected);
// Opens the <Popover> and sets the source of an iframe inside to the url
setPickerUrl(pickerUrl);
setIsFolderPickerOpen(true);
}
选项 2:让 Picker 构建自己的 iframe
如果有必要,虽然我不认为它在视觉上很吸引人,但我可以走这条路。这是到目前为止我为此选项尝试的代码(大部分相同,但不完全相同)
function getPicker(callback) {
const view = new google.picker.DocsView(google.picker.ViewId.FOLDERS);
view.setSelectFolderEnabled(true);
return (
new google.picker.PickerBuilder()
.addView(view)
.setSelectableMimeTypes("application/vnd.google-apps.folder")
.setTitle("")
.setCallback(callback)
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.setOAuthToken(getAccessToken() /* defined elsewhere - assume this works */)
.setDeveloperKey(process.env.API_KEY)
.setOrigin(window.location.host)
.build();
);
}
// This is an event listener
function showPicker() {
function handleFolderSelected(folder) {
const { Response, Action, Document } = google.picker;
if (folder[Response.ACTION] === Action.PICKED) {
const targetFolder = folder[Response.DOCUMENTS][0][Document.ID];
// do stuff
}
}
const picker = getPicker(handleFolderSelected);
picker.setVisible(true);
}
其他信息
我已经尝试在 Stack 中搜索这个问题,但是我没有找到专门针对这个问题的任何东西,所以我认为它不是重复的。我发现的最接近的是这个,其中一个未接受的答案中的评论表明可能不可能通过选项 1 附加回调,但我不能确定
我还注意到有几次,当我期望回调被调用时,来自 Picker 的消息被发布到父窗口,所以我试图捕捉它,但它没有被持续地触发。
对此的任何帮助将不胜感激!
解决方案
事实证明,问题不在于 Google Picker(感谢 iansedano 为我提供了一个可以解决的工作示例!)
问题是,出于可访问性的原因,Chakra UI 陷阱集中在模态中。这通常是一件好事,但是由于 Picker 的工作方式,每次您尝试单击“选择文件”按钮时,Chakra 都会在 Picker 处理单击之前将焦点抢回模态框的关闭按钮。
解决方案是使用以下属性来“解开”焦点。注意:我建议仅在 Picker 打开时临时执行此操作。在所有其他情况下,焦点陷印是一件好事。
import { Modal } from "@chakra-ui/react"
function Component() {
return (
<Modal trapFocus={false}>
...
</Modal>
);
}
推荐阅读
- flutter - 如何使 Flutter HTTP 部分(范围)请求?
- javascript - 如何设置输入按键的默认输入?
- object - 扩展接口时,我们应该使用object关键字吗?
- delphi - 如何确定服务器是否只能使用 IPv6 访问
- reactjs - 将 TextInput 中输入的文本打印到控制台
- python - 在自定义 html 模板中使用 django 表单
- r - 试图在 R 中创建一个表,在其中我按向量的变量对列进行分组
- php - 使用资源控制器的 Laravel 自定义操作名称和路由名称?
- asp.net - 具有输入和输出参数和 2 个记录集的存储过程
- powershell - 如何在 PowerShell 中设置电力线?