Javascript 如何在Chakra UI模式中将回调附加到Google Picker？

我正在尝试将集成到我的应用程序中，UI的显示与预期完全一致，但我似乎无法让它调用我尝试附加到它的任何回调

有两种使用选择器的方法，我更喜欢选项1，但我都可以

选项1：将选择器构建为URL以在自定义模式中呈现 我正在React（特别是Chakra）中构建我的应用程序，我更喜欢使用Chakra的

元素来帮助选择器融入页面的其余部分

使用此路线，这是我迄今为止的相关代码：

函数getPicker（回调）{ const view=new google.picker.DocsView（google.picker.ViewId.FOLDERS）； view.setSelectFolderEnabled（真）； 返回( 新的google.picker.PickerBuilder（） .addView（视图） .setSelectableMimeTypes（“application/vnd.google apps.folder”） .setTitle（“”） .setCallback（回调） .enableFeature（google.picker.Feature.NAV_隐藏） .setOAuthToken（getAccessToken（）/*在别处定义-假设它可以工作*/） .setDeveloperKey（process.env.API_KEY） .setOrigin（window.location.host） .toUri（）； ); } //这是一个事件侦听器 函数showPicker（）{ 功能句柄文件夹选择（文件夹）{ const{Response，Action，Document}=google.picker； if（文件夹[Response.ACTION]==ACTION.PICKED）{ const targetFolder=文件夹[Response.DOCUMENTS][0][Document.ID]； //做事 } setIsFolderPickerOpen（false）；//关闭 } const pickerUrl=getPicker（handleFolderSelected）； //打开并将内部iframe的源设置为url setPickerUrl（pickerUrl）； setIsFolderPickerOpen（真）； } 选项2：让选择器构建自己的iframe 如果有必要的话，尽管我不认为这在视觉上有吸引力，但我同意这条路线。这是迄今为止我为这个选项尝试的代码（基本相同，但不完全相同）

函数getPicker（回调）{ const view=new google.picker.DocsView（google.picker.ViewId.FOLDERS）； view.setSelectFolderEnabled（真）； 返回( 新的google.picker.PickerBuilder（） .addView（视图） .setSelectableMimeTypes（“application/vnd.google apps.folder”） .setTitle（“”） .setCallback（回调） .enableFeature（google.picker.Feature.NAV_隐藏） .setOAuthToken（getAccessToken（）/*在别处定义-假设它可以工作*/） .setDeveloperKey（process.env.API_KEY） .setOrigin（window.location.host） .build（）； ); } //这是一个事件侦听器 函数showPicker（）{ 功能句柄文件夹选择（文件夹）{ const{Response，Action，Document}=google.picker； if（文件夹[Response.ACTION]==ACTION.PICKED）{ const targetFolder=文件夹[Response.DOCUMENTS][0][Document.ID]； //做事 } } const picker=getPicker（handleFolderSelected）； picker.setVisible（true）； } 其他资料 我已经尝试过在堆栈中搜索这个问题，但我并没有找到任何专门针对这个问题的东西，所以我不认为它是重复的。我发现的最接近的情况是，在一个未被接受的答案中有一条评论表明，也许不可能通过选项1附加回调，但我不能确定

我还注意到，有几次当我期望调用回调时，有一条来自选择器的消息被发布到父窗口，所以我尝试捕捉它，但它没有被持续地触发

---

在此方面的任何帮助都将不胜感激

事实证明，问题不在于Google Picker（感谢iansedano为我指出了一个可以使用的示例！）

问题是，出于可访问性的原因，脉轮UI陷阱集中在情态动词中。这通常是一件好事，但由于选择器的工作方式，每次您尝试单击“拾取文件”按钮时，脉轮会在选择器处理单击之前将焦点偷回到模态的关闭按钮

解决方案是使用以下属性来“untrap”焦点。注意：我建议仅在选择器打开时临时执行此操作。在所有其他情况下，焦点捕获是一件好事

import { Modal } from "@chakra-ui/react"

function Component() {
  return (
    <Modal trapFocus={false}>
      ...
    </Modal>
  );
}

从“@chakra ui/react”导入{Modal}
函数组件（）{
返回(
...
);
}

行

.setCallback（callback）

不起作用吗？据我所知，没有。我已经尝试将

控制台.log（文件夹）

作为回调的第一行，两个版本中都没有登录任何内容。经过更多测试后，

.setCallback（callback）

似乎起作用，但效果非常有限。比如，我在选择按钮上捣碎我的鼠标，它可能在30-60秒后被调用，所以我想说我的问题保持不变。我在前面的问题上发布了一个例子，-我刚刚再次启动了这个例子，它使用了

.setCallback（）

，几乎是即时的，每次都会启动。这个例子是根据官员的话改编的。因此，

setCallback

似乎不是问题所在。有什么方法可以发布一个可复制的示例吗？非常有趣，我运行了您链接的演示，第一次尝试就成功了！不过，有一个工作示例非常有用。当我发现什么地方出了问题时，我会再做一些调查，并发布一个答案