React Tag Autocompleteを使ってサジェスト付きタグ機能を実装する

React Tag Autocompleteを使ってサジェスト付きタグ機能を実装する

プログラミング

react

2016-10-03 16:18:00

タグ機能をフルスクラッチで開発しようと思っていたのですが、便利なReact Componentが沢山見つかったのでそちらを利用してみました。

環境

導入

npmでReact Tag Autocompleteを導入します。

npm install --save react-tag-autocomplete

インクルードの仕方は色々あるかと思いますが、今回の環境ではrequireを使います。

var ReactTags = require('react-tag-autocomplete');

これで準備OKです。

実装

// 色々省略
<div id="react-tag-autocomplete"></div>

githubにUsageがありますが、ちょっと加工してapiをたたいてデータを取得してきたケースを想定してみます。(ここではsuperagentを使っています。)

apiではこんな感じのJsonレスポンスを返しています。

[{"id":1,"name":"プログラミング"},{"id":2,"name":"家事"},{"id":3,"name":"自宅警備"},{"id":4,"name":"早寝早起き"},{"id":5,"name":"三日坊主"}]

res.body.skillsのデバッグ
スクリーンショット 2016-09-28 3.04.10.png

var ReactTags = require('react-tag-autocomplete');

var App = React.createClass({
  getInitialState: function () {
    return {
      tags: [],
      suggestions: []
    }
  },

  componentDidMount: function () {
    request
      .get('/api/v1/user/config')
      .end(function(err, res){
        if (err) {
          alert('通信エラーです。リロードしてください。');
        }
        this.setState({
          suggestions: res.body.skills
        });
      }.bind(this));
  },

  handleDelete: function (i) {
    var tags = this.state.tags
    tags.splice(i, 1)
    this.setState({ tags: tags })
  },![tags.gif](https://qiita-image-store.s3.amazonaws.com/0/124495/173c6de9-b87a-6200-65ed-506e181f565e.gif)
![tags.gif](https://qiita-image-store.s3.amazonaws.com/0/124495/a3372702-2a85-9b80-0b53-ede2c9c3c486.gif)


  handleAddition: function (tag) {
    var tags = this.state.tags
    tags.push(tag)
    this.setState({ tags: tags })
  },

  render: function () {
    return (
      <ReactTags
        tags={this.state.tags}
        suggestions={this.state.suggestions}
        handleDelete={this.handleDelete}
        handleAddition={this.handleAddition} />
    )
  }
})

ReactDOM.render(
  <App />,
  document.getElementById('react-tag-autocomplete')
);

動作確認(余計なものが映っていますが・・)
tags.gif

cssは設定していないのですごくダサいですねw

他のオプションやcssのクラス名などgithubに丁寧に明記してあります。

所感

便利な時代だなぁヽ(´ー`)ノ