使用React自动增长文本区域问题

Question

我有这个小提琴here试图使用React实现自动增长的textarea。

我默认存储仅包含高度为40px的textarea样式，然后在textarea中输入更多内容时使用元素的scrollHeight逐渐增加其高度。

但它不起作用，并且每次输入的字符都会使高度增加10px。

有人可以帮我解决这个问题。

这里是整个代码：

class MyTextArea extends React.Component {

  constructor(props) {
    super();
    this.textAreaStyle = {
      height: '40px'
    };

    this.state = {
      textValue: ''
    }
  }

  componentWillUpdate(nextProps, nextState) {
    let height = this.textArea.scrollHeight;
    this.textAreaStyle = {
      height
    };
  }

  trackContent(event) {
    this.setState({
      textValue: event.target.value
    });
  }

  render() {
    return <div>
        <textarea 
          onChange={ this.trackContent.bind(this) }
          ref={(el) => { this.textArea = el } }
          style={ this.textAreaStyle }
          value={ this.state.textValue } 
        />
    </div>
  }
}

ReactDOM.render(
  <MyTextArea />,
  document.getElementById('container')
);

行为的Gif

Answer 1

更新了小提琴：https://jsfiddle.net/69z2wepo/79433/

也许尝试与offsetHeight进行比较。

或者，使用contentedtiable div

function check_height()
{
  var box = document.getElementById("box");
  let height = box.offsetHeight;

  if (height < box.scrollHeight)
  {
  	box.style.height = box.scrollHeight + "px";
  }
}

<textarea id="box" onkeyup="check_height()">
  
</textarea>

<div contenteditable style="min-height: 20px; width: 100px; border: 1px solid black;">
<div>

而不是使用value而不是使用defaultValue。