通过CustomEvent从JS向Java传递数据

Question

我有一个 Vaadin 项目

我正在从 JS lit 组件发送一个

CustomEvent

。

我正在从 Java 类中监听它，并且我正确地接收了发出的事件。

以下是我的JS代码：

this.dispatchEvent(new CustomEvent('change', {detail: this.breakLines, bubbles: true, composed: true}));

以下是我的 Java 监听器：

getElement().addEventListener("change", e -> {
    System.out.println("change value: " + e.getEventData());
});

目前我的Java代码输出一个空对象

{}

如何提取驻留在

"detail"

中的数据？

Answer 1

您可以在事件的 Jaa 构造函数中使用 @EventData 注释来实现此目的。请参阅下面的示例：

@DomEvent("tab-changed")
public static class TabChangedEvent<R extends TabSheet>
        extends ComponentEvent<TabSheet> {
...

    public TabChangedEvent(TabSheet source, boolean fromClient,
            @EventData("event.detail") JsonObject details) {
        super(source, fromClient);
        this.index = (int) details.getNumber("index");
        this.previousIndex = (int) details.getNumber("previousIndex");
        this.previousTab = details.getString("previousTab");
        this.tab = details.getString("tab");
        this.caption = details.getString("caption");
        this.source = source;
    }

完整的代码在这里https://github.com/TatuLund/TabSheet/blob/master/src/main/java/org/vaadin/addons/tatu/TabSheet.java#L385还有一个更长的故事Vaadin 博客 关于此。

Answer 2

Vaadin 默认不会提交事件的所有属性，你需要给它一个提示。例如，我在我的最近的 React 示例中这样做：

    getElement().addEventListener("color-change", e -> {
                var newValue = e.getEventData().getString("event.hex");
                setModelValue(newValue, true);
            })
            .addEventData("event.hex")

就您而言，可能是：

.addEventData("event.detail")

然后访问该布尔值：

e.getEventData().getBoolean("event.detail")

或者，您可以创建自定义事件并使用注释声明传输的详细信息，如其他答案中所述，但这需要更多代码。

Answer 3

以下Java代码将解决该问题：

getElement().addEventListener("change", e -> {
    JsonObject eventData = e.getEventData().getJsonObject("event.detail");
    // Access specific properties from the eventData object
    String breakLines = eventData.getString("breakLines");
    System.out.println("change value: " + breakLines);
});

在这段代码中使用

eventData.getJsonObject("event.detail")

方法获取从 JS lit 组件接收的 json 对象。然后，如果 breakLines 是自定义事件中 event.detail 对象的属性，您可以使用

eventData.getString("breakLines")

从 eventData 对象获取特定属性。