如何禁用React应用中MUI DateTimePicker的文本输入？

直接给TextField设置disabled={true}会导致整个组件（包括打开弹窗的图标）都被禁用，这就是你之前没达到预期的原因。正确的做法是使用readOnly属性，同时确保图标仍可点击：

renderInput={(params: any) => (
  <TextField
    {...params}
    readOnly={true} // 禁用文本输入，但保留组件交互性
    InputProps={{
      ...params.InputProps,
      disableUnderline: true,
      readOnly: true // 同步设置InputProps里的只读属性，强化效果
    }}
    variant="standard"
  />
)}

如果需要彻底阻止输入框的键盘交互，可以额外添加事件阻止默认行为：

renderInput={(params: any) => (
  <TextField
    {...params}
    readOnly={true}
    onKeyDown={(e) => e.preventDefault()} // 拦截键盘输入操作
    InputProps={{
      ...params.InputProps,
      disableUnderline: true
    }}
    variant="standard"
  />
)}

关键说明 #

• readOnly仅限制输入框的手动文本编辑，不会禁用组件的其他交互（比如点击图标打开弹窗）
• 不要使用disabled，它会禁用整个TextField的所有交互逻辑，包括弹窗触发按钮

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