Material-ui picker: как скрыть текстовое поле и открыть модал кнопкой - PullRequest
Новая
       53

Material-ui picker: как скрыть текстовое поле и открыть модал кнопкой

1 голос
/ 03 октября 2019

Я использую версию 3.2.6 Material-UI Pickers , чтобы создать компонент, который по-разному рендерится на мобильных и настольных компьютерах.

На рабочем столе я отображаю обычный встроенный указатель датыс textinput и для мобильных устройств я только хочу отобразить кнопку dateicon, которая открывает модальное значение

Из того, что я вижу, у API выбора материала нет подпорки для скрытия текстового поля, а DatePickerModal неавтономный компонент.

Я видел решения, использующие ref, чтобы открыть кнопку с помощью кнопки, но это, казалось, было для старых версий библиотеки, и я не мог заставить ее работать. Любые советы о том, как этого можно достичь с помощью последней версии? Есть ли какие-то реквизиты, которые я могу передать компоненту TextField, чтобы скрыть его?

1 Ответ

0 голосов
/ 14 ноября 2019

Вы можете скрыть текстовое поле, передав пользовательский компонент. Это будет похоже на 

function ControllingProgrammaticallyExample() {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedDate, handleDateChange] = useState("2018-01-01T00:00:00.000Z");

  return (
    <div className={classes.container}>
      <Button onClick={() => setIsOpen(true)}> Open picker </Button>

      <DatePicker
        open={isOpen}
        onOpen={() => setIsOpen(true)}
        onClose={() => setIsOpen(false)}
        value={selectedDate}
        onChange={handleDateChange}
        TextFieldComponent={() => null}
      />
    </div>
  );

Официальный пример: https://material -ui-pickers.dev / guides / control-programically

...