[React] contentEditable在Firefox的兼容问题，光标自动跳到前面

问题

通过contentEditable修改内容HTML内容，Chrome修改是正常，但是在Firefox中，每次修改光标都会自动的跳到输入内容的前面。

解决方案

修改Div的修改方法，把onInput改为用onChang和onBlur。

import { useState } from 'react';

function MyComponent() {
  const handleInputChange = (event) => {业务逻辑};

  return (
    <div>
      <div
	suppressContentEditableWarning="true"
	contentEditable="true"
	onInput={handleInputChange} # 不能用这个方式，因为这种方式会触发组件渲染
	onChang={handleInputChange} # 用这种，因为onChange会拦截组件渲染,可以避开Firefox和Chrome对渲染实现不同造成的问题
	onBlur={handleInputChange} # 如果onChang方法因为没有渲染无法拿到值，可以用失去焦点来获取值
	>
	输入的内容
      </div>
    </div>
  );
}

export default MyComponent;

解决思路

其实问题症结在Firefox和Chrome对渲染实现不同造成。所以思路就是通过onChang避开渲染，onBlur设置结果。我这种场景只需要保证结果最终一致即可，不需要考虑渲染问题。

后话：如果这种方式不能解决你的问题，可以考虑使用控制输入行为，例如在输入之后将光标强制设到后面，下面代码没试过可能有误。

function keepLastIndex(obj) {
    var range = window.getSelection();//创建range
    range.selectAllChildren(obj);//range 选择obj下所有子内容
    range.collapseToEnd();//光标移至最后
}