.offsetWidth 的 ref 没有在 React 中更新答案

【问题标题】：.offsetWidth of ref not updating in React.offsetWidth 的 ref 没有在 React 中更新
【发布时间】：2019-03-21 19:00:07
【问题描述】：

我正在尝试获取 ref 的宽度（到样式化的 textarea 元素），并且每次向其中添加文本时我都会尝试获取它：

const Input = styled.textarea`
min-height: 44px;
max-width: 50px;
margin-right: 15px;
padding: 12px 22px;
font-size: 14px;
`;

class App extends Component {
state = { textArea: "" };

handleChange = e => {console.log("this.textAreaRef.offsetWidth", 
this.textAreaRef.offsetWidth);
    this.setState({
      textArea: e.target.value
    });
  };

render() {
  const { textArea } = this.state;
  return (
    <Input
      ref={textAreaRef => {
        this.textAreaRef = textAreaRef;
      }}
      onChange={this.handleChange}
      value={textArea}
    />
  );
}

}

我能够在控制台记录宽度值，但我的问题是它不会随着我添加更多文本而改变。

这里是codesandbox：https://codesandbox.io/s/vqk4kk8503

【问题讨论】：

“我的问题是它不会随着我添加更多文本而改变。”有人会这样认为。 offsetwidth 是按照 CSS 中的规定计算的。文本区域的最大宽度（50px），添加填充（22px + 22px）然后添加文本区域轮廓的宽度（1px + 1px）。您希望看到什么结果？
offsetWidth 可能不适合您的任务。检查stackoverflow.com/questions/454202/…
所以你想得到内部文本的宽度或者你想得到什么。？
是的，我想在向文本添加文本时获取文本的宽度。
为什么要改变它？你想让 textarea 水平调整大小吗？既然你已经设置了max-width，那么宽度自然不会发生变化，它总是会返回相同的值。

标签： reactjs

【解决方案1】：

这是工作的codesandbox

我求助于制作<div id="dummyDiv"> 并将textarea 的文本注入其中。然后我应用了fontSize: '14px'、fontFamily: 'monospace' 并进一步计算了文本可能具有的假定宽度。

这个练习使 textarea 中的文本和 dummy div 中的文本在视觉上相同，因此我获取了 dummy div 的高度和宽度，它们与 textarea 中的文本占用的区域近似。

我已经注释掉了visibility: hidden; 并在styles.css 中的#dummyDiv 上添加了一个红色边框，以便您可以直观地确认该解决方案是否有效。

【讨论】：