javascript - 如何在 Ember js 组件中触发焦点移出

Question

我已经为文本框创建了组件，在这里我遇到焦点触发没有发生。如何从组件触发事件？

第 1 步创建文本框组件

文本框.hbs

{{input
      type=type
      value=amountValue
      placeholder=placeholder
      focus-out=focusouttrigger
}}

脚本中的第2步我在下面编写了代码

export default Component.extend({
  amountValue: null,
  didReceiveAttrs: function() {
    this._super(...arguments);
    let amountValue = this.get('amountValue');
    this.setProperties({
      amountValue: this.get('amountValue'),
      type: this.get('type'),
      placeholder: this.get('placeholder'),
      focusOutInput: this.get('focusOutInput')
    });

  },
  actions: {
    focusouttrigger: function() {
      console.log("working");
    }
  }

3) 主页我在主页中添加了以下代码

<S2bText
     @type='text'
     @amountValue='1000'
     @placeholder="Enter the Amount"
     @focusOutInput = "focusouttrigger" />

Answer 1

要使这项工作成功，需要改变一些事情:

如果操作 focusouttrigger 存在于呈现 {{input}} 的组件内部，那么您需要将其传递给输入使用 {{action}} 帮助器，如下所示:

{{input focus-out=(action "focusouttrigger") }}

如果将操作传递到呈现 {{input}} 的组件中，那么您需要通过属性名称引用它(并且还可以使用 Action 助手):

<YourComponent @focusOutInput={{action "focusouttrigger"}} />

然后当您渲染{{input}}时:

{{input focus-out=@focusOutInput }}

这是一个演示这两者的旋转:twiddle (焦点移出操作记录到控制台)