React中contentEditable输入文本反向首字符居尾如何解决

输入内容反向排列是代码问题共同导致的：

• 给设置了contentEditable的<p>标签加了display: flex样式，flex布局会破坏可编辑元素原生的光标定位逻辑，每次状态更新触发重渲染时，光标会自动跳到文本最前端，新输入的字符会被插入到文本开头，视觉上就呈现出内容倒序的效果。
• 直接将状态值props.value作为<p>标签的子节点渲染，每次输入触发状态更新时，整个标签的文本内容会被全量替换，浏览器原生记录的光标位置直接丢失，进一步加剧了内容顺序错乱。
• 额外代码bug：组件上的可编辑属性拼写错误，写为ontentEditable，缺失了首字母c；事件处理函数形参定义为e，内部却使用全局event对象取值，存在兼容隐患。

1. 调整可编辑元素样式，删除display: flex配置，改用普通文档流布局，补充文本省略号所需的必要样式：

width: 100%;
background: transparent;
display: block;
text-overflow: ellipsis;
cursor: text;
white-space: nowrap;
overflow: hidden;

2. 修正组件的属性拼写、事件传参问题，不要将状态值直接作为<p>标签的子节点传入，避免重渲染时全量覆盖DOM内容导致光标丢失：

<p
  spellCheck="false"
  contentEditable="true"
  onInput={(e) => handle(index, e)}
  onFocus={() => setFocus(true)}
  onBlur={() => setFocus(false)}
  placeholder="New Skill"
/>

3. 修正事件处理函数的变量引用问题：

function handle(index, e){
  // 直接使用传入的事件对象取值，避免依赖全局event
  const value = e.target.textContent;
  const newSkills = [...props.skills];
  newSkills[index].skills_group = value;
  props.setSkills(newSkills);
}

如果业务场景需要做完全受控的可编辑元素（即内容可能被组件外部逻辑修改），需要在每次状态更新前通过window.getSelection()接口记录当前光标位置，等组件重渲染完成后，手动将光标还原到对应位置，否则依然会出现光标跳转、输入顺序异常的问题。如果仅需要输入时同步状态，不需要外部主动修改内容，上述修复方案即可满足正序输入的需求。

内容的提问来源于stack exchange，提问作者nevoni3008