Nativescript-vue 获取有焦点的TextField答案

【问题标题】：Nativescript-vue get TextField that has focusNativescript-vue 获取有焦点的TextField
【发布时间】：2020-05-03 07:20:39
【问题描述】：

我在 Nativescript-vue 应用程序中有 2 个文本字段。

<StackLayout col="0" row="1">
  <Label text="Unit Price Excl"></Label>
  <TextField v-model="newItem.unitPriceExcl" @textChange="calcPricing" keyboardType="number" hint="Unit Price Excl"></TextField>
</StackLayout>
<StackLayout col="1" row="1">
  <Label text="Unit Price Incl"></Label>
  <TextField v-model="newItem.unitPriceIncl" @textChange="calcPricing" keyboardType="number" hint="Unit Price Incl"></TextField>
</StackLayout>

从上面可以看出，每当两个文本框的文本发生变化时，我都会调用相同的方法。

...
methods: {
  calcPricing(args) {
    // get focus here
  }
}
...

我想要的是，在 calcPricing 方法中，确定 2 个文本框中的哪一个当前具有焦点。

【问题讨论】：

您可以在文本字段上使用焦点/模糊事件来识别哪个处于活动状态。
@Manoj - 我意识到有一个焦点事件。您是否建议我存储某种任意变量，这是最后一个聚焦的文本字段，然后我可以在 textchange 事件中使用？
是的，我的建议是一样的。

标签： nativescript nativescript-vue

【解决方案1】：

这是您尝试做的一个可能的实现

<TextField v-model="newItem.unitPriceExcl" @textChange="calcPricing" keyboardType="number" @focus="focus" @blur="blur" hint="Unit Price Excl"></TextField>
<TextField v-model="newItem.unitPriceIncl" @textChange="calcPricing" keyboardType="number" @focus="focus" @blur="blur" hint="Unit Price Incl"></TextField>
...
data: () => ({ focusedElement: null })
methods: {
  focus({ object }) {
    this.focusedElement = object;
  },

  // You don't have to handle blur depending on your logic, but I find it more consistent
  blur({ object }) {
    if (this.focusedElement !== object) return;
    this.focusedElement = null;
  }
}
...

如果您不是真的想知道哪个元素具有焦点，而是想知道修改来自哪个元素。你可以这样做：

<TextField v-model="newItem.unitPriceExcl" @textChange="calcPricing('unitPriceExl')" keyboardType="number" hint="Unit Price Excl"></TextField>
...
methods: {
  calcPricing(name) {
    return (args) => {
      // Your logic goes here, you have access to name, and to args
    }
  }
}
...

旁注：您还可以使用一些本机方法来查找当前焦点所在的视图。不过要注意，它不是更快，也不推荐，主要思想是使用NS common api。

<TextField v-model="newItem.unitPriceExcl" @textChange="calcPricing" keyboardType="number" hint="Unit Price Excl" ref="unitPriceExcl"></TextField>
...
let UIResponder;
if (isIOS) {
  UIResponder = (UIResponder as any).extend({
      currentFirstResponder() {
         this.currentFirstResponder = null;
         UIApplication.sharedApplication.sendActionToFromForEvent('findFirstResponder', null, null, null);
         return this.currentFirstResponder;
      },
      findFirstResponder(application: UIApplication) {
        this.currentFirstResponder = new WeakRef(self)
      }
    }, {
      exposedMethods: {
        currentFirstResponder: { returns: UIView, params: [ ] }
      }
    })
}
...
methods: {
  getFocusedView() {
    if (isAndroid) {
      const activity = application.android.foregroundActivity;
      if (activity) {
        return activity.getCurrentFocus()
      }
    } else if (isIOS) {
      return UIResponder.currentFirstResponder;
    }

    return null;
  },

  isFocused(object) {
    if (object.nativeView && object.nativeView.nativeView) return false;
    return this.getFocusedView() === object.nativeView.nativeView;
  },

  calcPricing(args) {
    if (this.isFocused(this.$refs.unitPriceExcl)) {
        console.log('unitPriceExcl is selected');
    }
  },
}
...

【讨论】：