时间戳

首页 > 解决方案 > Vaadin TextField 的值在快捷方式侦听器中不可用

vaadin - Vaadin TextField 的值在快捷方式侦听器中不可用

问题描述

当用户按下 Enter 键时，我想读取 Vaadin Flow TextField 的值。我可以添加一个 ShortcutListener 来侦听按键，但是即使 TextField 不为空，侦听器中 TextField 的值为 null：TextField textField = new TextField();

   Shortcuts.addShortcutListener(UI.getCurrent(), () -> {
     String text = texttextField.getValue();
     // text doesn't contain the latest text
   }, Key.ENTER);

为什么会发生这种情况？当按键监听器被触发时，如何读取用户输入的值？

标签： vaadinvaadin-flow

解决方案

该行为归结为浏览器事件。虽然用户可能已经在 input 元素中输入了一些文本，但TextField直到有ValueChange事件发生时才会将值更新到服务器 - 即使vaadin-text-field浏览器中的元素也不“知道”文本（value属性尚未更新) 当 enter keypress 事件发生时。默认情况下，文本字段的值仅在输入失去焦点时更新。blur您可以通过显式切换TextField的 a 来解决此问题：

// member field in class
boolean shortcutFired = false;

// ...

  Shortcuts.addShortcutListener(UI.getCurrent(), () -> {
     textField.blur();
     shortcutFired = true;
  }, Key.ENTER);

并监听值更改事件而不是快捷方式监听器：

textField.addValueChangeListener(e -> {
  if( shortcutFired ) { 
    String value = e.getValue();
    // do something with the value
    shortcutFired = false;
  } 
}

如果您需要跟踪多个字段，则此方法效果不佳；在这种情况下，您可能希望通过将 TextField 的 ValueChangeMode 设置为 来更积极地将其值更新到服务器ValueChangeMode.EAGER。这种方法的缺点是它增加了浏览器和网络之间的流量，因为每次按键都会触发服务器请求。

推荐阅读