ReactでTextareaの高さを可変にする

問題点

textareaのstyleにline-heightを指定すると
入力された値が1行の時でも、余分に余白ができてしまった。。。

textareaの高さを入力された行数によって、可変にしたい。

結論

textareaのrow属性を動的に指定して、実現できた。

コード(React_classコンポーネント)

constructor()

constructor(){
    super();
    this.state={
      text:"サンプルテキスト"
    }
}

高さを計算する関数

• textarea内の改行は\nで取得できる
• 入力値を\nで分割すれば、改行数が取得できる

calcTextAreaHeight(value){
    let rowsNum = value.split('\n').length;

    return rowsNum
}

render()

<textarea defaultValue={this.state.text} 
　　　　　　　　　　　　　　　　　　　　rows={this.calcTextAreaHeight(this.state.text)} 
　　　　　　　　　　　　　　　　　　　　onChange={e => this.setState({text:e.target.value})} />