Question

我试图获取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}
    />
  );
}

}

我能够记录宽度值控制台，但是我的问题是当我向其中添加更多文本时它不会改变。

此处在codeandbox上：https://codesandbox.io/s/vqk4kk8503

Answer 1

这是工作中的codesandbox

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

此练习使文本区域和虚拟div中的文本在视觉上相同，因此我获取了虚拟div的高度和宽度，这些高度和宽度近似于文本区域中文本所占的面积。

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

ref的.offsetWidth在React

1 个答案: