Reactガイドを読んでいくその22
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
React の流儀
昨日の続きです。
Step 5: 逆方向のデータフローを追加する
ここまででpropsとstateが階層構造を流れていく関数として正しく描画を行えるアプリを作ることができました。
ここではFilterableProductTableにあるstateを更新する様に追加を行います。
Reactではデータフローが明確になり、プログラムの動作がわかりやすくなるものの、従来の双方向データバインディングよりもタイプ量が増えている。
理想はユーザがフォームを変更するたびにユーザ入力を反映する様にstateを更新したい。
コンポーネントのstateを更新できるのは自分自身のみであるべきということからFilterableProductTableはSearchBarにコールバックを渡して置いてstateを更新したいときに実行してもらう様に組み替える。
元々のFilterableProductTable
class FilterableProductTable extends React.Component { constructor(props) { super(props); this.state = { filterText: '', inStockOnly: false }; } render() { return ( <div> <SearchBar filterText={this.state.filterText} inStockOnly={this.state.inStockOnly} /> <ProductTable products={this.props.products} filterText={this.state.filterText} inStockOnly={this.state.inStockOnly} /> </div> ); } }
SeachBarにコールバックを渡す様変更したFilterableProductTable
class FilterableProductTable extends React.Component { constructor(props) { super(props); this.state = { filterText: '', inStockOnly: false }; this.handleFilterTextChange = this.handleFilterTextChange.bind(this); this.handleInStockChange = this.handleInStockChange.bind(this); } handleFilterTextChange(filterText) { this.setState({ filterText: filterText }); } handleInStockChange(inStockOnly) { this.setState({ inStockOnly: inStockOnly }) } render() { return ( <div> <SearchBar filterText={this.state.filterText} inStockOnly={this.state.inStockOnly} onFilterTextChange={this.handleFilterTextChange} onInStockChange={this.handleInStockChange} /> <ProductTable products={this.props.products} filterText={this.state.filterText} inStockOnly={this.state.inStockOnly} /> </div> ); } }
変更後のSearchBar
renderだけだったものにhandleFilterTextChangeやconstructorを追加している。
class SearchBar extends React.Component { constructor(props) { super(props); this.handleFilterTextChange = this.handleFilterTextChange.bind(this); this.handleInStockChange = this.handleInStockChange.bind(this); } handleFilterTextChange(e) { this.props.onFilterTextChange(e.target.value); } handleInStockChange(e) { this.props.onInStockChange(e.target.checked); } render() { return ( <form> <input type="text" placeholder="Search..." value={this.props.filterText} onChange={this.handleFilterTextChange} /> <p> <input type="checkbox" checked={this.props.inStockOnly} onChange={this.handleInStockChange} /> {' '} Only show products in stock </p> </form> ); } }
今日やってきたところまででReactのMAIN CONCEPTS部分が終了となりました。
次からはADVANCED GUIDESに入っていきます。
今日はここまで。