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

我有一把小提琴，它试图用React实现自动增长的textarea

默认情况下，我将只包含高度的textarea样式存储为40px，然后随着我们在textarea中键入更多内容，使用元素的scrollHeight逐渐增加其高度

但它不起作用，并且每输入一个字符，它的高度就会增加10像素

有人能帮我解决这个问题吗

这里是完整的代码：

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

类MyTextArea扩展React.Component{
建造师（道具）{
超级（）；
this.textAreaStyle={
高度：'40px'
};
此.state={
文本值：“”
}
}
组件将更新（下一步，下一步状态）{
让高度=this.textArea.scrollHeight；
this.textAreaStyle={
高度
};
}
trackContent（事件）{
这是我的国家({
textValue:event.target.value
});
}
render（）{
返回
{this.textArea=el}}
style={this.textAreaStyle}
value={this.state.textValue}
/>
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

Gif的行为 更新的小提琴：

也许可以试着和远视相比较

或者，使用

contentedTable

div

功能检查\u高度（）
{
var-box=document.getElementById（“box”）；
让高度=箱。远离视线；
如果（高度