Draftjs测试编辑器的自动对焦功能

Question

如何确保我的UI上唯一的draft-js文本框在页面加载时自动聚焦？

有一个名为focus的已记录方法，但我不确定需要实现的语法。

- WΔ_

Answer 1

如果您的编辑器已被初始化为某个默认值，那么仅使用 this.refs.editor.focus() 会使光标位于文本开头。因此，为了将光标移动到末尾，我们需要在 componentDidMount 中进行如下操作。

  componentDidMount() {
    this.setState({
      editorState:  EditorState.moveFocusToEnd(this.state.editorState), // EditorState imported from draft-js
    });
  }

链接到该方法的地址：https://github.com/draft-js-plugins/draft-js-plugins/blob/master/draft-js-plugins-editor/src/Editor/moveSelectionToEnd.js。

- Shravya

---

被低估的答案 - Dimitar Nikovski

Answer 2

请参见这里

基本上，您可以像这样操作：

<Editor ref="someRef" />

并且

componentDidMount = () => {
    this.refs.someRef.focus();
}

- Tyler Sebastian

---

我曾经想过答案是否涉及到组件生命周期，这是我到目前为止没有必要研究的。我会进一步调查 :) - WΔ_

我可以确认这个方法适用于新的React useEffect钩子。虽然我使用了我的引用，就像这样：ref={someRef}，在我的UseEffect中，我使用someRef.current.focus();并传入一个空数组作为依赖项。 - nkhil