React-無法使用JavaScript更改DOM的樣式

Question

我想動態更改DOM的height 。 但是我不能。 沒有錯誤，console.log不會打印任何內容，只是空白，並帶有一個數字，指示該空白行在控制台上打印了多少次。 ref的作品，但似乎無論我寫信給ref將不會被更新到DOM。

在每次按鍵時，都會調用我的resizeTextInput函數。

  constructor(props) {
    super(props);

    this.state = {
      textLen: 0,
      commentError: false,
    };

    this.textInputRef = React.createRef();
    this.commentBlockRef = React.createRef();
    this.resizeTextInput = this.resizeTextInput.bind(this);
    this.handleSearch = this.postComment.bind(this);
    this.postComment = this.postComment.bind(this);
  } 


  resizeTextInput() {
    this.commentBlockRef.current.style.height = 300;
    console.log(this.commentBlockRef.current.style.height);
  }

  postComment(event) {
    this.resizeTextInput();
  }

  render() {
    return (
      <div className="comment-wrap">
        <div className={`comment-block ${className}`} ref={this.commentBlockRef}>
          <textarea className={`textarea-${className}`} type="text" placeholder="Write a comment..." onKeyUp={this.postComment} ref={this.textInputRef} size="55" />
          <div className={`comment-block-len ${(commentError || postError) ? 'comment-error' : ''}`}>{textLen}/{MAX_LEN}</div>
        </div>
      </div>
    );
  }
}

Answer 1

它應該是300px的字符串，而不是300只。

this.commentBlockRef.current.style.height = '300px';