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

Question

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

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>

沙盒示例https://codesandbox.io/embed/hungry-galileo-eydfw

Answer 1

只需将Select组件包装在 a 中div，然后div将ref.

此外，尝试使用state来记录宽度并在渲染之外定义 ref-width 读取逻辑。把它放在里面componentDidMount()，这样我们就可以确保元素已经渲染到屏幕上，我们不需要检查是否ref.current为真。

你也可以使用.clientWidth而不是.offsetWidth这样你得到实际的元素宽度，不包括边框。

请参阅工作沙箱：

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;