Material UI v5中MobileDatePicker组件readOnly属性失效问题咨询

1. Material UI v5的MobileDatePicker自带的readOnly属性仅作用于原生输入框的只读逻辑，不会约束组件内部绑定的点击唤起日期选择器的自定义事件，因此仅设置该属性无法阻止弹窗弹出。
2. 现有代码中直接给TextField传入InputProps={{ readOnly: true }}会覆盖params中自带的InputProps参数，导致组件预设的属性丢失，进一步导致只读逻辑失效。

• 核心方案：动态控制选择器打开权限+正确透传只读属性
  通过disableOpenPicker属性动态绑定只读状态，同时合并InputProps避免覆盖原有参数，可完整区分readOnly和disabled两种状态，满足业务差异化需求，参考代码如下：

const [isReadOnly, setIsReadOnly] = useState(true); // 业务侧控制只读状态的变量
const [value, setValue] = useState(null);

<MobileDatePicker
  label="Date mobile"
  inputFormat="MM/dd/yyyy"
  value={value}
  onChange={handleChange}
  // 只读状态下禁止打开选择器
  disableOpenPicker={isReadOnly}
  renderInput={(params) => (
    <TextField 
      {...params} 
      // 合并原有InputProps，追加只读属性
      InputProps={{ 
        ...params.InputProps, 
        readOnly: isReadOnly 
      }} 
      // 可选追加：阻止输入框点击事件冒泡，避免异常触发交互
      onClick={(e) => {
        if (isReadOnly) e.stopPropagation();
      }}
    />
  )}
/>

• 两种状态的差异表现符合常规业务要求：
  • readOnly状态：输入框文本可选中复制，样式保持正常可交互状态，仅无法唤起选择器、无法修改值
  • disabled状态：输入框灰化，文本不可选中，所有交互失效

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