Javascript 如何使用React ref获得元素的宽度？

我有一个select字段，但无法使用React Ref获取此select的宽度

this.selectRef.current

是一个对象，但似乎无法获取元素的宽度

     <Select
        fullWidth
        ref={this.selectRef}
        onChange={event => {
          this.setState({
            value: event.target.value
          });
        }}
        value={this.state.value}
      >
        <MenuItem value={0}>Zero</MenuItem>
        <MenuItem value={1}>One</MenuItem>
        <MenuItem value={2}>Two</MenuItem>
        <MenuItem value={3}>Three</MenuItem>
        <MenuItem value={4}>Four</MenuItem>
      </Select>

{
这是我的国家({
值：event.target.value
});
}}
value={this.state.value}
>
零
一个
两个
三
四

---

沙盒示例

只需将

选择的
组件包装在
div
中，并将
div
指定为
ref

此外，尝试使用
state
记录宽度，并在渲染外部定义ref-width读取逻辑。将它放在
componentDidMount（）
中，这样我们就可以确保元素已呈现到屏幕上，并且不需要检查
ref.current
是否真实

您还可以使用
.clientWidth
而不是
.offsetWidth
来获得实际的元素宽度，不包括边框

:

import React，{Component}来自“React”；
从“@material ui/core”导入{Select，MenuItem}”；
类MySelect扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
值：0，
开：错，
宽度：空
};
this.selectRef=React.createRef（）；
}
componentDidMount（）{
const width=this.selectRef.current.clientWidth；
这是我的国家(
{
宽度：宽度
},
（）=>console.log（this.state.width）
);
}
render（）{
返回(
{
这是我的国家({
值：event.target.value
});
}}
value={this.state.value}
>
零
一个
两个
三
四
);
}
}
导出默认MySelect；
Hi fetchenko，请尝试下面的解决方案，如果有帮助，请告诉我：）
import React, { Component } from "react";
import { Select, MenuItem } from "@material-ui/core";

class MySelect extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: 0,
      open: false,
      width: null
    };

    this.selectRef = React.createRef();
  }

  componentDidMount() {
    const width = this.selectRef.current.clientWidth;
    this.setState(
      {
        width: width
      },
      () => console.log(this.state.width)
    );
  }

  render() {
    return (
      <div ref={this.selectRef}>
        <Select
          fullWidth
          ref={this.selectRef}
          onChange={event => {
            this.setState({
              value: event.target.value
            });
          }}
          value={this.state.value}
        >
          <MenuItem value={0}>Zero</MenuItem>
          <MenuItem value={1}>One</MenuItem>
          <MenuItem value={2}>Two</MenuItem>
          <MenuItem value={3}>Three</MenuItem>
          <MenuItem value={4}>Four</MenuItem>
        </Select>
      </div>
    );
  }
}

export default MySelect;