如何防止使用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;

    }   

}