使用 Material UI 对话框时“无法读取 null 的属性‘offsetWidth’”答案

【问题标题】："Cannot read property 'offsetWidth' of null" when using Material UI Dialog使用 Material UI 对话框时“无法读取 null 的属性‘offsetWidth’”
【发布时间】：2018-11-29 20:26:50
【问题描述】：

当我用 Material UI “Dialog” 包装“form”元素时，我收到“Cannot read property 'offsetWidth' of null”错误，这使得 InputLabel 的自动宽度无法工作。

当我删除 Dialog 时，它工作得很好，并且 InputLabelRef 在 ComponentDidmount 上被正确读取。

沙盒示例：https://codesandbox.io/s/1q98z07w13

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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

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

这里的技巧是确保在调用componentDidMount 时始终安装您的表单。为此，您需要将表单拆分为一个单独的组件，该组件完全位于您的 Dialog 组件内。这样componentDidMount 会在Dialog 显示您的单独组件时调用，而不是在Dialog 本身已呈现时调用。

我已更新您的沙盒以包含我提到的更改：https://codesandbox.io/s/zw705046w3

【讨论】：

【解决方案2】：

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

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

虽然我没有展示它，但你可以相信我的话，如果你渲染这个 post-mount 它不会抱怨任何错误。

【讨论】：

你的沙箱不会去代码...只是结果
如果你想要多选，你会怎么做？
@lowcrawler，也许你可以尝试点击右下角的“打开沙箱”按钮？