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

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;
実行結果

-
前の記事
Nuxt.js ライブラリ「vue-sliding-pagination」を使用してスライド式のページャーを実装する 2020.06.03
-
次の記事
Percona Server 外部のホストから接続可能にする 2020.06.03
コメントを書く