HTML React 将插入符号设置为不同的内容可编辑 div

Question

我已经实现了一个项目，其中有一些内容可编辑的div。

当在其中一个div 的文本中间按下 Enter 键时，我将div 拆分为两个单独的内容可编辑div，但是当 React 重新渲染组件时，插入符号会转到第一个div 的开头。

我想知道是否有任何方法可以使插入符号转到第二个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>
);
}
}