Closed2021/12/16にクローズ2

React.jsで複数選択できるようにする

前提

selectタグなどは使いたいが、デザインを細かく触りたいので、一旦考えない。

実装事項

選択する候補となる値を取得して保存しておく
選択したことをどこかに保存しておく。
2-1-1. 選択した要素を保存するタイミングをいつにするか→2-1-3
2-1-2. 複数選択のドロップダウンを閉じた時
2-1-3. 複数選択のドロップダウンを選択した時
複数選択のドロップダウンを閉じるタイミング
3-1. 選択したい要素をクリックした時にしてしまうと、操作的にちょっと面倒
3-2. ドロップダウンの範囲外をクリックした時とする
選択している要素を強調表示するようにロジック or CSSを当てるようにする
4-1. 選択している要素を保存してあることを前提にリストのViewを構築する際に、フラグを立てていれる。
4-2. 選択する候補の配列によるmapで構築していくので、それを選択する
Propagationのの影響範囲を絞る

注意事項

アンマウントの際のメモリリーク

参考

JavaScript

React.js

このスクラップは2021/12/16にクローズされました