0

我正在尝试处理弹出外部窗口中的 React 组件，我正在使用FlexLayout、ag-Grid React和SyncFusion React并且我设法通过在 FlexLayout 中使用const currentDocument = this.selfRef.current.ownerDocument; -check Floating Tabs (Popouts)来处理带有 FlexLayout 的外部窗口-并将其传递currentDocument给getDocument()在 ag-Grid 中回调，现在我想对 SyncFusion 做同样的事情，但我发现 SyncFusion 中没有方法/属性可以传递currentDocument给它。

那么，无论如何将外部窗口文档传递给 SyncFusion 组件，该组件将在进入外部窗口并离开原始文档后重新渲染？

附上未将currentDocument（新的外部窗口）传递给 SyncFusion 组件时的问题的屏幕截图我按下了外部窗口（右侧）中的 Date Picker 按钮，但 DatePicker 组件呈现在原始窗口（左侧）中！

SyncFusion DatePicker 问题截图

4

2 回答 2

0

您可以使用 open 事件参数中的 appendTo 方法在所需位置自定义 DatePicker 弹出窗口。请参考以下代码，

    render() {
        return (
          <div className="control-pane">
            <div className="control-section">
              <div className="datepicker-control-section">
                <DatePickerComponent open={this.onOpen.bind(this)} />
              </div>
            </div>
            <div id="target" />
          </div>
        );
      }
     onOpen(args) {
        args.appendTo = document.body.querySelector("#target");
      }

请在下面找到示例，

示例链接：https ://stackblitz.com/edit/react-eekdsn?file=index.js

于 2020-10-30T14:46:51.810 回答
0

您可以通过在 DateTimePicker 弹出窗口的打开事件中设置 X 和 Y 位置来对齐与输入元素相关的弹出位置，如下面的代码示例中所述。

    this.onOpen = (args) => {
      args.popup.position = { X: "left", Y: "bottom" };
    };

弹出位置的可能值是左、右、上和下。尝试指定所有可能的值组合以根据您的视口对齐弹出窗口。

此外，您可以在数字中设置 offsetX 和 offsetY 值（通过成像 x 和 y 轴来提供 x 和 y 值）以对齐 DateTimePicker 弹出窗口与输入元素相关。在这里，我们提供了基于桌面模式的 offsetX 和 offsetY 值。您可以根据视口对其进行自定义。

   this.onOpen = (args) => {
    args.popup.offsetX= 1000;
     args.popup.offsetY= 1000;
   };

示例链接：https ://stackblitz.com/edit/react-yhgq4y-w2avy2?file=index.js

如果上述建议的解决方案对您没有帮助，请提供有关您的查询的更多详细信息。

于 2020-10-06T11:32:57.430 回答