Vaadin 14：将数据从 Web 组件发送到服务器答案

【问题标题】：Vaadin 14: sending data from a web component to serverVaadin 14：将数据从 Web 组件发送到服务器
【发布时间】：2021-11-08 19:29:21
【问题描述】：

如何使用 html5 webcomponent 将数据从客户端发送到服务器

设置从服务器到客户端的数据，非常简单，就像一个魅力怎么找不到将数据发送到服务器的解决方案

请帮忙，但我不会使用 Lit 或 Polymer

#JavaScript
    class SimpleComponent extends HtmlElement {
      
      connectedCallback() {
        this.innerHTML = '<input type="text" id="test"/>";
        this._input = this.querySelector('#test');

         this._input.onchange = function() {
               *****  i want to send the value to server ****
          })
        

 

    }

    setInputValue(value) {
        this._input.value = value;
     }




}
customElements.define("simple-com",SimpleComponent);

现在服务器上的 Java

    @Tag("simple-com")

       class SimpleComponent extends Component {

          public SimpleComponent() {

        }

           public void setValue(String value) {
                 getElement().callJsFunction("setValue",value);

   }
 }

【问题讨论】：

我现在没有时间写一个正确的答案，但我可以看出要在 Vaadin 文档中查找的关键字是 @ClientCallable。
@LeifÅstrand ClientCallable 不是答案。相信我已经尝试过了。解决方案是找到调用服务器的 Javascript API，在聚合物中它是 $.server，但我找不到它
Polymer 或 Lit 与它无关。请注意，它是$server 而不是$.server。
@LeifÅstrand，$server 和 $.server 都没有定义在客户端检查控制台。

标签： vaadin vaadin14

【解决方案1】：

与 Polymer 或 LitElement 相比，主要挑战是使用 innerElement.onchange = function() {} 模式定义的事件处理程序将不会在 this 引用自定义元素实例的情况下运行。这反过来意味着尝试使用this.$server 将不起作用，因为this 没有指向预期值，即使$server 确实存在于它应该存在的位置。

解决此问题的最简单方法是将代码更改为使用箭头函数 (() => {}) 而不是显式的 function。这是因为箭头函数从定义函数的范围继承this，而显式函数根据其运行方式以不同的方式定义this。另一种方法是将this 的引用存储在单独的变量中（例如let root = this），然后在函数中引用该变量而不是this（例如root.$server.doSomething()）。

将所有内容放在一起，这就是代码经过我修改后的样子。

class SimpleComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<input type="text" id="test"/>';
    this._input = this.querySelector('#test');
    this._input.onchange = () => {
      this.$server.handleChange(this._input.value);
    };
  }

  setValue(value) {
    this._input.value = value;
  }
}
customElements.define("simple-com", SimpleComponent);

【讨论】：