MDEditor组件无法正常输入内容的问题应该如何解决？

故障解决方法 #

你使用的是MDEditor受控组件模式，无法输入的问题绝大多数来自上层状态绑定错误，可按以下步骤逐一排查：

• 检查父组件的状态绑定逻辑，必须用useState维护传入的value值，且传给组件的onChange属性要正确触发状态更新，正确调用示例如下：

import { useState } from 'react';
import FormComment from './FormComment';

const ParentComponent = () => {
  // 声明受控状态
  const [commentValue, setCommentValue] = useState('');

  const handleSubmit = () => {
    // 自定义提交逻辑
    console.log('提交内容：', commentValue);
  }

  return (
    <FormComment 
      value={commentValue}
      onChange={setCommentValue}
      onSubmit={handleSubmit}
    />
  )
}

• 检查属性赋值规范，部分版本的MDEditor要求autoFocus属性为布尔值，将代码中的autoFocus={0}修改为autoFocus={false}，避免属性识别异常导致编辑区被禁用。
• 排查样式冲突：按F12打开开发者工具，选中MDEditor的输入textarea元素，查看是否被设置了disabled、readonly或者pointer-events: none属性，同时确认没有其他浮层元素挡住输入区导致点击无效。
• 验证版本兼容问题：如果以上步骤均未解决问题，可尝试升降级MDEditor版本，部分旧版本和React 18严格模式存在兼容问题，可临时关闭React.StrictMode验证是否为兼容导致的故障。

内容的提问来源于stack exchange，提问作者Quách Ngọc Thành