EmberJS Octane将重点放在元素上

伊恩·柯克帕特里克（Ian Kirkpatrick）

我的组件包含许多文本区域和一个添加另一个文本区域的按钮。当用户单击按钮时，将添加一个新的文本区域。我希望焦点转移到这个新的文本区域。

我看到了这个答案，但这是针对较旧的版本的，我们没有在Ember中使用jQuery。

到目前为止，我有：

五为什么

type LocalWhy = {
  content: string;
};

export default class FiveWhys extends Component<FiveWhysArgs> {
  @tracked
  whys: LocalWhy[] = ...

  @action
  addWhy() {
    this.whys.pushObject({ content: "" });
  }
}

五为什么

{{#each this.whys as |why i|}}
  <TextQuestion @value={{why.content}} />
{{/each}}

<button {{on "click" (action this.addWhy)}}>Add Why</button>

文本问题

...
<textarea value="{{ @value }}" />

问题概要

用户单击“为什么添加”后，如何将焦点设置到新的文本区域？

伊恩·柯克帕特里克（Ian Kirkpatrick）

发现Ember.run.schedule组件重新渲染后，我可以使用它来运行代码。

@action
addWhy() {
    ... // Adding why field
    Ember.run.schedule('afterRender', () => {
      // When this function has called, the component has already been re-rendered
      let fiveWhyInput = document.querySelector(`#five-why-${index}`) as HTMLTextAreaElement
      if (fiveWhyInput)
        fiveWhyInput.focus();
    })
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。