Ember.js 在ember js中的文本框上设置焦点

我正在尝试将文本更改为文本框。如果用户单击文本，它将变为一个测试框，因此他们可以编辑内容。我已经做到了。我可以通过下面的代码设置焦点

{{input value=animal.name autofocus=true}}

它只是第一次起作用。如果我调出焦点，文本框将再次变为文本内容。如果我再次单击文本，我可以看到文本框，但它不在焦点中。下面是我正在尝试的代码

组件文件：

import Ember from 'ember';

export default Ember.Component.extend({
  isTextBox: false,
  actions: {
    editTest() {
      this.set('isTextBox', true);
    }
  },
  focusOut() {
    this.set('isTextBox', false);
  },
});

模板文件：

{{yield}}
<center><h2>
<div onclick = {{action 'editTest'}}>
{{#if isTextBox}}
{{input value=animal.name autofocus=true}}
{{else}}
{{animal.name}}
{{/if}}
</div>
</h2></center>

{{yield}
{{#如果isTextBox}
{{input value=animal.name autofocus=true}
{{else}
{{animal.name}
{{/if}

我是ember的新手，我试图在不使用jQuery的情况下进行聚焦

---

这里是旋转。

您可以向输入助手提供id

{{input id='cat-text' value=animal.name }}

可以使其成为每次渲染的焦点文本字段

didRender(){    
    this.$('#cat-text').focus();
  }

---

要扩展kumkanillam的答案，您可以在渲染生命周期结束时设置焦点（如果渲染文本框）。由于您的组件中只有一个文本输入，所以只需使用选择器即可找到它。不用担心在这里使用jQuery，这就是它的用途，所以它是Ember方式

didRender(){
  if(this.get('isTextBox')){
    this.$('input[type=text]:first').focus();
  }
}

---

您可以在普通的旧Javascript中执行此操作，如下所示：

didRender(){
    // This works but is not very ember-ish
    // document.getElementById('cat-text').focus();

    // For a component, you can do this
    this.get('element').querySelector("#cat-text").focus();
}

这假设您有如下输入：

{{input id='cat-text' value=animal.name }}

---

Ember 2.13+不再依赖于jQuery（尽管您使用的一些附加组件可能是），因此您有可能消除jQuery将添加到应用程序有效负载中的35kb（最小+gzip）。

组件/input text-focused/component.js:

import TextField from '@ember/component/text-field';

export default TextField.extend({
  didInsertElement(...args) {
    this._super(...args);
    const element = this.get('element');
    if (element) element.focus();
  },
});

---

这是

this.$（'#cat text'）.focus（）jQuery函数？没有使用jQuery函数还有其他方法吗？（是否有余烬功能可用？）。建议在ember中使用jQuery函数？我在找到根本原因后没有解决这个问题。我只是把它修好以得到你需要的。使用jQuery函数根本不推荐。顺便说一句，不要接受这个答案，因为可能有余烬的方式来解决这个问题，我不知道。谢谢，亚当。我担心在余烬中使用jQuery。您的评论清楚地表明我们可以使用它。请注意，如果此组件有一个输入字段，并且如果用户在其中键入，它将再次调用
didRender
函数，用户将失去对输入的关注。我已将其更改为
didInsertElement
{{input-text-focused type="text" name="search" value=search}}