タグ機能ってあるじゃないですか。
イメージ的には以下のプラグインのような感じ。
Select2 - The jQuery replacement for select boxes
こんな感じで、選択肢から何かを選ぶ形式。それで、ちょっと離れたところにあるDOMにも影響が出る感じ。
要は、複数のDOMで同期的に変更が起こる感じ。
さいしょはjQueryで実装していたんですけど、「それReactでやってみたら?」と言われたのでやってみました。
環境設定
Reactを書くための環境設定は、以下のチュートリアルから拝借。
書いたもの
まだ作成途中ですが。
DEMO
未完成なのでDEMOも何もないのですが。途中経過です。
http://chuck0523.github.io/JSPractise/react_practise/skill-tag/dist/index.html
1. 下部に並んでいるスキル名を選択
2. inputタグとその上部に、選択したスキルがセットされる
これが完成形です。
また、Inputタグに入力されると、選択肢からサジェストされる機能もつけたいです。
続きはまた次回!