如何在reactjs中将插入符位置放在contentEditable div的末尾？

Question

我有一个contentEditable div。我在div中添加了一些HTML或文本。

例如，当我单击数据列表时，该数据将被附加到contentEditable div中的现有数据上。

在我的情况下，添加数据后，我需要集中注意contentEditable div并将光标指向div的末尾。

现在，添加数据后，我可以专注于可编辑div。但是光标指针总是在开始时发生。

这是我的反应代码：

import React, { Component } from 'react';
import Caret from './caret.js';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.onClickAddData = this.onClickAddData.bind(this);
  }

  state = {
    message: 'Initial Message',
  };

  dataList = [
    'data 01',
    'data 02',
    'data 03',
  ];

  onClickAddData(event, data) {

    this.setState({
      message: this.state.message + ' ' + data,
    });
    const elem = document.getElementById('myEditableDivId');
    elem.focus();
    const caret = new Caret(elem);
    // caret.setPos(2);
  }

  renderData() {
    return this.dataList.map(data => {
      return (
        <li
          onClick={(e) => { this.onClickAddData(e, data) }}
          value={ data }
        >{ data }
        </li>
      );
    });
  }

  render() {
    return (
      <div>
        <div>
          <ul>
            { this.renderData() }
          </ul>
        </div>
        <div
            contentEditable ={true}
            dangerouslySetInnerHTML={ { __html:  this.state.message } }
            id='myEditableDivId'
            >
        </div>
      </div>
    );
  }
}

export default App;

我从这个Caret.js课上得到了帮助：

https://gist.github.com/isLishude/6ccd1fbf42d1eaac667d6873e7b134f8

/**
 * @file get/set caret position and insert text
 * @author islishude
 * @license MIT
 */
export class Caret {
    /**
     * get/set caret position
     * @param {HTMLColletion} target
     */
    constructor(target) {
        this.isContentEditable = target && target.contentEditable
        this.target = target
    }
    /**
     * get caret position
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Range}
     * @returns {number}
     */
    getPos() {
        // for contentedit field
        if (this.isContentEditable) {
            this.target.focus()
            let _range = document.getSelection().getRangeAt(0)
            let range = _range.cloneRange()
            range.selectNodeContents(this.target)
            range.setEnd(_range.endContainer, _range.endOffset)
            return range.toString().length;
        }
        // for texterea/input element
        return this.target.selectionStart
    }

    /**
     * set caret position
     * @param {number} pos - caret position
     */
    setPos(pos) {
        // for contentedit field
        if (this.isContentEditable) {
            this.target.focus()
            document.getSelection().collapse(this.target, pos)
            return
        }
        this.target.setSelectionRange(pos, pos)
    }
}

export default Caret;

在setPos类的Caret.js方法中， 我试图将（currentPos +1）作为值。

但是它说，它没有找到孩子。

因此，添加一些文本或HTML之后，如何在EditableDiv的末尾设置插入符号的位置？