«Невозможно прочитать свойство« offsetWidth »из NULL» при использовании диалогового окна Material UI

Question

В тот момент, когда я обертываю элемент "form" с пользовательским интерфейсом Material "Dialog", я получаю ошибку "Cannot read свойство 'offsetWidth' of null", которая делает невозможной работу автоматической ширины InputLabel.

Когда я удаляю Dialog, он работает просто отлично, и InputLabelRef правильно читается на ComponentDidmount.

песочница с примером: https://codesandbox.io/s/1q98z07w13

Мне нужно, чтобы он был завернут в Dialog.В чем может быть проблема здесь?

Answer 1

Для тех, кто хочет , все еще использует выделенное выделение, не требуя его рендеринга при монтировании , вы можете просто использовать компонент TextField пользовательского интерфейса материала, но передать ему метку select и метку (так как выкак правило, с другими текстовыми полями).Для вас обрабатывается свойство метки offSetWidth.

Вот рабочая песочница, показывающая select, но с оберткой TextField.

Хотя я этого не показываю, вы можете взятьЯ хочу сказать, что если вы выполните рендеринг этого пост-монтирования, он не будет жаловаться на ошибки.

Answer 2

Причина, по которой это происходит, заключается в том, что компоненты внутри вашего диалога не отображаются при вызове componentDidMount, даже если ваше состояние по умолчанию open === true.

Хитрость заключается в том, чтобы убедиться, чточто ваша форма всегда будет монтироваться при вызове componentDidMount.Для этого вам нужно разделить вашу форму на отдельный компонент, который находится внутри вашего Dialog компонента.Этот способ componentDidMount вызывается, когда Dialog отображает ваш отдельный компонент, а не когда сам Dialog рендерится.

Я обновил вашу песочницу, чтобы включить упомянутые изменения: https://codesandbox.io/s/zw705046w3