Draft.js编辑器onChange函数失效仍显示内容更新的问题咨询

原因解析 #

Draft.js编辑器的内部设计允许它在临时更新DOM内容后再触发onChange回调。如果你的onChange没有正确将新的editorState同步到组件状态，就会出现「UI显示更新，但组件状态没变化」的情况——这本质是编辑器的临时DOM状态和组件受控状态不一致：

• 用户输入时，编辑器会先更新自身DOM以实时反馈输入操作
• 随后生成新的editorState并调用onChange
• 若onChange未将新状态同步到组件state，组件的受控源（即你传入的editorState属性）还是旧值，一旦组件因任何原因重新渲染，编辑器就会回滚到旧状态。

解决建议 #

• 确保onChange正确更新组件状态：在onChange回调里必须调用状态更新函数，将新的editorState同步到组件state，比如：

  const handleChange = (newEditorState) => {
    console.log("onChange触发");
    setEditorState(newEditorState); // 关键：同步新状态到组件state
  };
  

• 检查onChange的绑定是否正常：如果使用类组件，要确保handleChange的this指向正确（可以用箭头函数定义，或者在constructor中绑定）；函数组件则无需担心，但要避免每次渲染都重新创建回调（可以用useCallback优化）。
• 确认Editor组件的editorState属性正确传递：必须将组件state中的editorState传给Editor组件，保证编辑器处于受控模式：

  <Editor editorState={editorState} onChange={handleChange} />
  

• 排查是否有代码拦截了事件：检查是否有其他事件处理逻辑调用了event.preventDefault()或者阻止了事件冒泡，导致onChange无法正常触发。

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