TextArea创造了太多的空间。如何将其限制在对象的大小？

Question

我有一个这样的文本区域：

<Form.TextArea fluid label='ADI' value = {cmsObj.ADI} rows={rows} cols="10"  />

它使用我的函数计算大小：

 calculateRows(text){
    if(!text)
        return 1;

    return  Math.ceil(text.length/10);
  }

这个函数创建了足够的空间，但不幸的是它分配了太多的空间。文本结束后有很多空格。你知道创建足够的空间来获取对象的所有文本(但最后没有空白)的函数应该是什么吗？

Answer 1

您可以使用scrollHeight值来确定文本区域onInput的新height。像这样的东西可能就是您正在寻找的：http://jsfiddle.net/ltsOver9000/sptmfw34/

class TextArea extends React.Component {
  constructor(props) {
    super(props)
    this.state = {height:'100px'};
  }

  render() {
    return (
        <div>
            <textarea 
            style={{height: this.state.height}} 
            onInput={e=>this.setState({height: `${e.target.scrollHeight||0}px`})}/>
        </div>
      );
  }
}