Question

我在我的react应用程序中使用Kendo Window React包装器组件，如果您查看文档，则打开窗口的方式是：

  $("[data-role='window']").each(function (index) {
            $(this).data('kendoWindow').open()
        });

但这将打开页面上的每个窗口。使用多个Windows控件时如何打开一个窗口？

Answer 1

您说得对，它将打开页面上的每个窗口。使用Kendo React包装器时，用于处理相同类型小部件的recommended approach是将它们放置在不同的容器中以帮助您定位它们：

当使用用于React包装的Kendo UI时，我们建议将相同类型的小部件放置在不同的容器中，以便轻松选择它们，因为ID属性不会直接传递给新组件

我已经修改了basic sample，我假设您正在使用它来证明这一点：

class LayoutsContainer extends React.Component {

    open() {
        $("#win1 [data-role='window']").data('kendoWindow').open();
    }

    onOpen(){
        console.log('Open event was triggered!');
    }

    onClose(){
        console.log('Close event was triggered!');
    }

    onDragStart(){
        console.log('DragStart event was triggered!');
    }

    onDragEnd(){
        console.log('DragEnd event was triggered!');
    }

 render() {
   return (
     <div id="win1">
           <Window open={this.onOpen} close={this.onClose} dragstart={this.onDragStart} dragend={this.onDragEnd} title={"About Alvar Aalto"} width={"640px"}>
               <p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p>

               <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p>

               <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p>
           </Window>
           <span id="undo" className="k-button" onClick={this.open}>Click here to open the Window</span>
       </div>
    );
  }
}

ReactDOM.render(
  <LayoutsContainer  />,
  document.querySelector('my-app')
);

打开多个Kendo Window React包装器

1 个答案: