HTML 将光标设置为不同的 contenteditable div

Question

我实施了一个项目，其中有一些内容可编辑 div。当在其中一个 div 的文本中间按下回车键时，我将 div 分成两个单独的内容可编辑的 div，但光标会转到第一个 div 当 React 重新渲染组件时。

我想知道是否有任何方法可以让光标移到第二个的开头div，这会让界面感觉更自然。我知道两个 div 的 ID，如果有帮助的话。

Answer 1

这是我从 React 文档中提取的使用 refs 聚焦的示例。

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

HTML 将光标设置为不同的 contenteditable div

HTML React set cursor to different contenteditable div

html

javascript

contenteditable

reactjs