読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

React.jsでタグ機能を実装する(前半)

React.js

タグ機能ってあるじゃないですか。

 

イメージ的には以下のプラグインのような感じ。

Select2 - The jQuery replacement for select boxes

 

f:id:chuck0523:20160113020752p:plain

こんな感じで、選択肢から何かを選ぶ形式。それで、ちょっと離れたところにあるDOMにも影響が出る感じ。

要は、複数のDOMで同期的に変更が起こる感じ。

 

さいしょはjQueryで実装していたんですけど、「それReactでやってみたら?」と言われたのでやってみました。

 

環境設定

Reactを書くための環境設定は、以下のチュートリアルから拝借。

c16e.com

 

書いたもの

まだ作成途中ですが。

gist8a0785c0a76aee2261b4

 

DEMO

未完成なのでDEMOも何もないのですが。途中経過です。

 

f:id:chuck0523:20160113021321p:plain

http://chuck0523.github.io/JSPractise/react_practise/skill-tag/dist/index.html

 

1. 下部に並んでいるスキル名を選択

2. inputタグとその上部に、選択したスキルがセットされる

これが完成形です。

また、Inputタグに入力されると、選択肢からサジェストされる機能もつけたいです。

 

続きはまた次回!