为什么editable-div会将光标移动到div前面

Question

<div className="min-w-[600px] min-h-[36.8px]" >
                 <div id={`editableDiv-${Object.keys(item)}-${index}`} className="p-3" contentEditable suppressContentEditableWarning onInput={(e) => onChange(e)} >
                  {Object.values(item)}
              </div>

使用上面的 editable-div 代码，当触发 onInput 时，索引不断移动到 div 的前面。例如。当我输入“fruit”时，它会变成“tiurf”

 <div className="min-w-[600px] min-h-[36.8px]" >
                 <div id={`editableDiv-${Object.keys(item)}-${index}`} className="p-3" contentEditable suppressContentEditableWarning onInput={() => onChange} >
                  {Object.values(item)}
              </div>

我之前使用过这段代码，它有效。但是，它停止触发 onInput。

const onChange = (e: any) => {
    console.log(1)
    let targetId = e.currentTarget.id
    let objectContent = e.currentTarget.textContent
    let checkIndex = parseInt(targetId.split('-')[2])
    let checkTitle = targetId.split('-')[1]
    let newArr = [...content]
    newArr[checkIndex][checkTitle] = objectContent
    setContent(newArr)
    updateData(content)
  } 

这是正在触发的 onChange 函数。

当 onInput 未触发且未在使用状态的对象中进行管理时，它会照常工作。但是，当 div 的 onInput 被触发时，它开始将光标移动到前面。

Answer 1

发生这种情况是因为每次我更改 editable-div 内的数据时，状态都会发生变化，并且页面会重新渲染，导致光标移动到前面。

因此，不使用 useState，而是使用 useRef 不会重新渲染页面，从而提供连续的写入流程。

附注任何重新渲染都会将光标移动到前面。