Блог

readOnly Флаг для MUI MobileDatePicker не работает. API не влияет на onClick функциональность. Единственным обходным путем является использование флага отключено. Однако мы используем обе readOnly функции и отключенные функции для разных случаев использования. Любая помощь будет признательна.

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

Похоже 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)}
    />
  );
}