Javascript 如何防止使用GWT无序添加控件？

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

为了更好地理解我，我附加了一个代码示例（它不是真正的代码，只是普通的示例）

---

您基本上是在两个面板中添加了两次相同的按钮，并在其中添加了两个

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;
    }   
}

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;
    }   
}