React：编辑contentEditable div时如何保持插入位置？

Question

目前

我有一个react组件，当用户点击contentEditable newValue时存储<div>，并在用户输入时更新newValue。注意：有两个主要原因可以解释为什么我这样设置这种行为：（1）我不想发送要保存在每个按键上的数据，（2）我打算使用这个div的变体检查每个输入以验证输入是否是数字。
当newValue失去焦点时，发送<div>被保存，然后重置道具的状态。

问题

onChangeHandler正在将可编辑div内的插入符号位置移动到左侧。这导致击键123456出现为654321

码：

class Input extends Component {

  constructor(props) {
    super(props);
    this.state = {
      //newValue input by user
      newValue : undefined
    }
  }

  //handler during key press / input
  onChangeHandler = event => {
    let targetValue =  event.currentTarget.textContent;
    this.setState({"newValue": targetValue})
  }

  //handler when user opens input form
  onBlurHandler = event => {
    //some code that sends the "newValue" to be saved, and resets state
  }

  render() {
    //determine which value to show in the div
    let showValue;
    //if there is a new value being input by user, show this value
    if (this.state.newValue !== undefined) {
      showValue = this.state.newValue;
    } else {
      //if prop has no value e.g. null or undefined, use "" placeholder
      if (this.props.value) {
        showValue = this.props.value;
      } else {
        showValue = "";
      }
    }

    return (
    <table>
    <tbody>
      <td>
          <div
            contentEditable="true"
            suppressContentEditableWarning="true"
            onInput={this.onChangeHandler.bind(this)}
            onBlur={this.onBlurHandler}
          >{showValue}
          </div>
      </td>
     </tbody>
     </table>
    )
  }
}

export default Input;

笔记

我以前用<textarea>这样做没有这个问题，但切换到<div>更多地控制自动调整div高度行为（ref CSS: Remove scroll bar and replace with variable height for textarea in a table <td>）
我已经能够找到许多相关的答案，但没有一个具体反应，例如Maintain cursor position in contenteditable div。我假设因为反应在每次中风后重新加载组件，这个问题正在发生。
我以前没有ChangeHandler onInput，这工作正常，但我无法记录每个按键并验证该字符是否为数字。

Answer 1

另一答案