React.js textareaの値をリアルタイムで表示する

  • 作成日 2020.06.03
  • 更新日 2020.12.25
  • React
React.js textareaの値をリアルタイムで表示する

textareaの値をstateを使用して、リアルタイムで画面表示するためのサンプルコードを記述してます。

環境

  • OS  CentOS Linux release 8.0.1905 (Core)
  • node V12.13.1
  • npm 6.14.2
  • React 16.13.0

サンプルコード

下記がサンプルコードとなります。

import React from 'react';

class Sample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'please'
    };
    this.handleChange = this.handleChange.bind(this);    
  }

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

  render() {
    return (
      <div>
        <textarea value={this.state.value} onChange={this.handleChange} cols={50} rows={5} />
        <div>
          <h1>textareaの値</h1>
          <div>{this.state.value}</div>
        </div>
      </div>
    );
  }
}

export default Sample;

実行結果