如何防止使用GWT乱添加控件？

Question

我在应用程序中使用 GWT 创建两个具有相同按钮的面板。例如，两个面板 PanelFirst 和 PanelSecond 有两个类，还有一个按钮 MyButton 的类，单击后显示警报。我向两个面板添加一个按钮，并期望看到一个包含两个面板的页面，每个面板上都有相同的按钮。但我得到两个面板，其中 PanelFirst 为空，PanelSecond 有两个重叠的按钮（按钮看起来像一个按钮，当我单击它时，我收到两个警报，在 html 的 DevTool 中，我看到两个按钮放置在同一位置）。为什么会发生这种情况？根本原因是异步js吗？我该如何解决这个问题？

为了更好地理解我，我附上了一个代码示例（这不是真正的代码。这只是常见的示例）。

class PanelFirst {

   private static Button myFirstButton = new Button();

   private static FlowPanel firstPanel;

   public PanelFirst (){};

   public FlowPanel createPanelFirst(){

     firstPanel = new FlowPanel();

     myFirstButton = MyButton().createMyButton();

     firstPanel.add(myFirstButton);

     return firstPanel;

   }   

}

class PanelSecond  {

   private static Button mySecondButton = new Button();

   private static FlowPanel secondPanel;

   public PanelSecond(){};

   public FlowPanel createPanelSecond(){

     secondPanel= new FlowPanel();

     mySecondButton = MyButton().createMyButton();

     secondPanel.add(mySecondButton);

     return secondPanel;

   }   

}

class MyButton {

   private static Button mySecondButton = new Button();

   public MyButton(){};

   public Button createMyButton(){

     mySecondButton.addClickHandler(new ClickHandler() {

            @Override

            public void onClick(ClickEvent event) {

                createAlert("I'm button");

            }

        });

     return mySecondButton;

   }   

}

Answer 1

好吧，您基本上是在 2 个面板中添加相同的按钮 2 次，并向ClickHandler其中添加 2 。您需要像这样更改您的代码：首先将您的方法更改createMyButton为静态方法并在那里创建一个新对象class MyButton {    public MyButton(){};    public static Button createMyButton(){        MyButton button = new MyButton();        button.addClickHandler(new ClickHandler() {            @Override            public void onClick(ClickEvent event) {                createAlert("I'm button");            }        });        return button;    }   }现在您可以在面板中使用它：class PanelFirst {    private static FlowPanel firstPanel;    public PanelFirst (){};    public FlowPanel createPanelFirst(){        firstPanel = new FlowPanel();        firstPanel.add(MyButton.createMyButton());        return firstPanel;    }   }class PanelSecond  {    private static FlowPanel secondPanel;    public PanelSecond(){};    public FlowPanel createPanelSecond(){        secondPanel= new FlowPanel();        secondPanel.add(MyButton.createMyButton());        return secondPanel;    }   }