javascript - 如何防止使用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 次，并向其中添加 2 个 ClickHandler。您需要像这样更改代码:

首先将 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;
    }   
}