如何实时获取元素的属性值？

Question

我对此完全陌生。而现在ReactJs对我来说是深林。文档非常复杂。很难理解什么功能和写在哪里，甚至声明变量。我想实时获取元素属性值。怎么做？

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

        this.chatRef = React.createRef();
        this.state = {
            backgroundColor: 'transparent',
            buttonIsHidden: 'none',
            maskIsHidden: true,
            size: 0
        }
     }   

     componentDidMount() {
        const size = this.chatRef.current.clientHeight;
        this.setState({size: size});
     }

     render() {
        console.log(this.state.size);
        return(

我总是得到相同的值50px ...但我知道textarea在50-150px之间改变大小。

Answer 1

import React from "react";
import { render } from "react-dom";

class App extends React.Component {
  state = {
    size: ""
  };
  getSize = () => {
    console.log(this.refs.hello.offsetWidth);
    this.setState({ size: this.refs.hello.offsetWidth });
  };
  render() {
    return (
      <div>
        <button onClick={() => this.getSize()}> Get Size </button>
        <textarea onMouseMove={() => this.getSize()} ref={"hello"} />
        {this.state.size}
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

您不想使用componentDidMount()，因为这只会在第一次渲染后发生。

getSize函数使用引用来引用textarea，我们将onMouseMove处理程序添加到textarea，这将为您提供该大小的实时值。

  

HTMLElement.offsetWidth只读属性返回布局   元素的宽度。通常，元素的offsetWidth是a   测量包括元素边界，元素水平   填充，元素垂直滚动条（如果存在，如果呈现）和   元素CSS宽度。如果元素被隐藏（例如，通过   然后，在元素上的style.display或其“祖先”之一的祖先   返回0。

了解offsetWidth