Reactガイドを読んでいくその22

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

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に入っていきます。

今日はここまで。