今回はユーザーが入力した値を別のComponentにリアルタイムに渡すサンプルを作ってみたいと思います。
カラーチェッカーComponent
テキストボックスに色の名前を入力すると、ほぼリアルタイムに■の色が変化するComponentになります。Reactの公式ドキュメントの水の温度によって表示を変化させるサンプルを改変した物です。
サンプル
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>ColorChecker</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- Don't use this in production: --> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> function ShowColor(props) { return( <p style={{color:props.color, fontSize:'20px'}}>■</p> ); } class ColorChecker extends React.Component { constructor(props) { super(props); this.state = {color: ''}; this.handleChange = this.handleChange.bind(this); } handleChange(e) { this.setState({color: e.target.value}); } render() { const color = this.state.color; return ( <fieldset> <legend>色名を入力してください:</legend> <input value={color} onChange={this.handleChange} placeholder="例:Red" /> <ShowColor color={color} /> </fieldset> ); } } ReactDOM.render( <ColorChecker />, document.getElementById('root') ); </script> </body> </html>
実行結果
解説
内包するComponentに値を渡す
ゆっくり処理を追うとわかると思いますが、動作的には難しいことはしていません。
の中に
Componentが存在しています。
ポイントはrender()
メソッドです。
render() { const color = this.state.color; return ( <fieldset> <legend>色名を入力してください:</legend> <input value={color} onChange={this.handleChange} placeholder="例:Red" /> <ShowColor color={color} /> </fieldset> ); }
このinput
タグに値を入力すると、
onChange
イベントが発生し、handleChange()
メソッドが呼ばれるhandleChange()
でStateが更新され、render()
メソッドが呼ばれる
の箇所で、最新の値が
Componentに渡される
Componentの処理が実行される
という流れになります。
書籍
React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)
posted with amazlet at 18.12.24
穴井 宏幸 石井 直矢 柴田 和祈 三宮 肇
翔泳社
売り上げランキング: 139,067
翔泳社
売り上げランキング: 139,067