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';

React - 无法使用JavaScript更改DOM的样式

1 个答案: