前回の続き。

お題

今回のお題は、Clearボタンの実装。

Clearボタンを押すと、ユーザー名のテキストボックスと、検索済みのリポジトリ一覧をクリアします。

f:id:hinathy:20160428170049p:plain

テキストボックスをクリアする

まずは、ユーザー名のテキストボックスのvalueを、ステートで管理します。value={this.state.username}を追加しました。

class SearchBox extends React.Component {
  ... (snip) ...
  render() {
    return (
          ... (snip) ...
          <input type="text" value={this.state.username} onChange={this.handleChange} placeholder="Enter username" />
          ... (snip) ...
    );
  }

次に、SearchBoxにClearボタンとClearボタンクリック時のイベントハンドラhandleClear()を追加します。 handleClear()では、setState()を介してテキストボックスの値をクリアするようにしています。

class SearchBox extends React.Component {
  ... (snip) ...
  handleClear(e) {
    this.setState({username: ''});
  }

  render() {
    return (
          ... (snip) ...
          <input type="button" value="Clear" onClick={this.handleClear} />
          ... (snip) ...
    );
  }
  ... (snip) ...
}

これでユーザー名をクリアすることができます。

constructorで、handleClear()をthisにbindするのをお忘れなく。

  constructor(props) {
    ... (snip) ...
    this.handleClear = this.handleClear.bind(this);
  }

リポジトリ一覧をクリアする

ClearボタンクリックのイベントをAppに通知するため、onClear()をPropに追加します。 SearchBoxは、Clearボタンクリック時にこの関数を呼び出します。

class SearchBox extends React.Component {
  ... (snip) ...
  handleClear(e) {
    this.props.onClear();
    this.setState({username: ''});
  }
  ... (snip) ...
}

SearchBox.PropTypes = {
  ... (snip) ...
  onClear: React.PropTypes.func.isRequired
};

Appでは、SearchBoxに追加されたonClearPropにコールバック関数handleClear()を渡し、handleClear()が呼び出された契機でthis.state.repositoriesをクリアします。

class App extends React.Component {
  ... (snip) ...
  handleClear() {
    this.setState({repositories: []});
  }

  render() {
    return (
      <div>
        <SearchBox onSubmit={this.handleSubmit} onClear={this.handleClear} />
        <RepositoryList repositories={this.state.repositories} />
      </div>
    );
  }
  ... (snip) ...
}

以上で実装完了です。

gyazo.com