Sassyブログ

好きなことで暮らしを豊かにするブログ

Reactで入力フィールドに入力した値を画面に表示してみる

目次

本記事は筆者自身の知識の棚卸のために書いておりますが何かの参考になれば幸いです。

開発環境は下記の記事で作成したものを使用しておりますので参考にしてください。 ご自身で用意した環境があればそちらを使用しても構いません。

create-react-appを使用してReactアプリのフロントエンド開発環境を導入しよう

www.sassy-blog.com

1.入力フィールドを用意する

App.jsのreturnの中を書き換えます。 ※index.htmlとindex.jsは全体をわかりやすくするために掲載しています。

index.html
<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <title>React App</title>
  </head>
  <body>
  <noscript>
  You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
  </body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
  return (
  <div>
  <input type="text" value="" />
  <button onClick="">追加</button>
  </div>
  );
  }
}
export default App;

画面は自動で反映されるため、ブラウザに戻ると下記のように入力フィールドとボタンが表示されているはずです。

f:id:y_saiki:20171006095120p:plain

しかし、このままの状態では入力ができません。

Reactではstateを通してvalue属性などを操作してあげる必要があります。

2.状態を管理する。

次は状態を管理できるようにします。 これを行うことでテキストフィールドに値を入力できるようになります。 ここではテキストフィールドに入力した内容でState内のデータを書き換えてみます。

App.jsのソースコードを下記のように修正する。

App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  constructor(props){
  super(props);
  this.state = {
  inputValue:"",
  };
  this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
  //もとのstateはいじってはいけないため、オブジェクトをコピーして、
  // コピーしたオブジェクトにデータを詰めて最後にstateを上書きする。
  let newState = Object.assign({}, this.state);

  newState.inputValue = event.privateData.inputValue;

  this.setState(newState);
  }

  render(){
  return(
  <AppContents value={this.state} onChange={this.handleChange} />
  )
  }
}

class AppContents extends Component {
  constructor(props) {
  super(props);
  this.privateData = props.value;
  }

  changeData(e){
  this.privateData.inputValue = e.target.value;
  this.props.onChange(this);
  }

  render() {
  return (
  <div>
  <input type="text" value={this.props.value.inputValue} onChange={(e) => {this.changeData(e)}} />
  <button onClick="">追加</button>
  <br />
  <label>State内のデータ</label>
  <pre>{JSON.stringify(this.props, null, ' ')}</pre>
  </div>
  )
  }
}

export default App;

f:id:y_saiki:20171006095155p:plain

「test」と値を入力してみます。

そうするとテキストフィールド下部にあるState内のinputValueの値が「test」に書き換わっているはずです。

f:id:y_saiki:20171006095305p:plain

以上