readOnly MobileDatePicker 在 MUI v5 中不起作用答案

【问题标题】：readOnly MobileDatePicker doesn't work in MUI v5readOnly MobileDatePicker 在 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 }} />
  )}
/>

【问题讨论】：

标签： reactjs material-ui react-material material-ui-x

【解决方案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} .... /> }