使用材质UI对话框时，“无法读取null的属性'offsetWidth'”

Question

当我用材质UI“对话框”包装“表单”元素时，出现“无法读取null的属性'offsetWidth'”错误，这使InputLabel的自动宽度无法工作。

当我删除Dialog时，它可以正常工作，并且可以在ComponentDidmount上正确读取InputLabelRef。

沙箱，例如：https://codesandbox.io/s/1q98z07w13

我需要用Dialog包裹它。这里可能是什么问题？

Answer 1

发生这种情况的原因是，即使您的默认状态为componentDidMount，调用open === true时，对话框内部的组件也不会呈现。

这里的技巧是确保在调用componentDidMount时始终挂载表单。为此，您需要将表单分成一个单独的组件，该组件位于Dialog组件内部。当componentDidMount显示单独的组件时，而不是在Dialog本身已呈现时，将调用Dialog。

我已经更新了您的沙箱，以包括我提到的更改：https://codesandbox.io/s/zw705046w3

Answer 2

对于其他想要仍然使用概述的选择但又不需要将其呈现在挂载上的人，您可以只使用Material UI的TextField组件，但将其传递给select道具和标签（通常与其他文本字段一样）。将为您处理offSetWidth标签属性。

Here's a working sandbox showing select but with the TextField wrapper.

尽管我没有显示它，但您可以相信我的话，即如果您渲染此后挂载，它将不会有任何错误。