readOnly MobileDatePicker 在 MUI v5 中不起作用

Posted 2023-02-22

【中文标题】readOnly MobileDatePicker 在 MUI v5 中不起作用

【英文标题】：readOnly MobileDatePicker doesn't work in MUI v5

【发布时间】：2021-12-11 21:09:21

【问题描述】：

MUI MobileDatePicker 的 readOnly 标志不起作用。 API 对onClick 功能没有影响。唯一的解决方法是使用禁用标志。但是，对于不同的用例，我们同时使用 readOnly 和禁用的功能。任何帮助表示赞赏。

<MobileDatePicker
  label="Date mobile"
  disableOpenPicker
  inputFormat="MM/dd/yyyy"
  value=value
  readOnly
  onChange=handleChange
  renderInput=(params) => (
    <TextField ...params InputProps= readOnly: true  />
  )
/>

【参考方案1】：

看起来里面的TextField 是只读的，但选择器不是，您可以通过单击TextField 打开选择器。一个简单的解决方法是始终将open 状态设置为false 以防止选择器被打开：

<MobileDatePicker readOnly open=false

如果您需要动态更改readonly 值：

function EnhancedMobileDatePicker(props) 
  const [open, setOpen] = React.useState(false);
  const  readOnly  = props;

  React.useEffect(() => 
    // do not auto open picker after setting readOnly to false
    if (!readOnly) setOpen(false);
  , [readOnly]);

  return (
    <MobileDatePicker
      ...props
      readOnly=readOnly
      open=readOnly ? false : open
      onOpen=() => setOpen(true)
      onClose=() => setOpen(false)
    />
  );

【讨论】：

上述解决方案适用于选择器始终处于禁用状态的情况。我正在传递一个道具来确定选择器是否被禁用。当值作为 true 传递时，上述解决方案将失败，即日期选择器弹出窗口始终打开且不会关闭。

@Yash 所以你想要一个动态的readonly 用于你的DatePicker？

@Yash 查看我的更新答案。

是的，完全正确。有办法吗？出于测试目的，我们使用如下所示的内容。但只是想知道周围是否有实际的解决方案。

props.isEditable ? <MobileDatePicker label='Date Selector' .... /> : <MobileDatePicker label='Date Selector' readOnly open=false .... />