当我用 Material UI“Dialog”包装“form”元素时，出现“无法读取 null 的属性‘offsetWidth’”错误，这使得 InputLabel 的自动宽度无法工作。
当我删除 Dialog 时，它工作正常，并且在 ComponentDidmount 上正确读取 InputLabelRef。
沙盒示例：https : //codesandbox.io/s/1q98z07w13
我需要用 Dialog 包装它。这里可能有什么问题？
使用 Material UI 对话框时“无法读取 null 的属性‘offsetWidth’”
IT技术
reactjs
material-ui
2021-05-22 11:12:10
2个回答
发生这种情况的原因是对话框内的组件在componentDidMount被调用时不会呈现，即使您的默认状态是open === true.
这里的技巧是确保你的表单在componentDidMount被调用时总是被挂载。为此，您需要将表单拆分成一个单独的组件，放在Dialog组件内部。这种方式componentDidMount在Dialog显示您的单独组件时调用，而不是在它Dialog本身呈现时调用。
我已更新您的沙箱以包含我提到的更改：https : //codesandbox.io/s/zw705046w3
对于想要仍然使用轮廓选择而不需要在 mount 上呈现它的任何其他人，您可以只使用 Material UI 的 TextField 组件，但将selectprops和标签传递给它（就像您通常使用其他文本字段一样）。offSetWidth 标签属性已为您处理。
这是一个显示选择但带有 TextField 包装器的工作沙箱。
虽然我没有展示它，但你可以相信我的话，如果你渲染这个 post-mount 它不会抱怨任何错误。