React Tableを使ってみる調査の一環

行の選択機能を実装してみる

参考にするところ

変更点

Mock dataの構造を単純にする

列のネストをなくす

check boxではなく、行のhighlightで選択を表す

18:44:04

React TableでCRUDを実装してみるのsandboxをforkした

18:48:29 check box用の列をつくる関数を useTable の引数にあとづけて渡しているみたい

19:10:09 関数の詳細はここ

React.forwardRefというものを使っている

なんだろうこれ？

useRef()をcomponentの外で使えるようにする関数みたい

19:01:01 かいた

19:03:02 ん？でも外部からrefを作ってcomponentに渡してないぞ

19:11:36 API referenceを見てみたけど、関数からrefが渡されることはない

てことはReact.forwardRef必要ないな

あと HTMLInputElement.indeterminateってなんだ？

19:10:19 調べた

19:12:29 移植開始

19:12:58 <table> 部分は変えなくていいみたい

選択内容をjsonで表示する部分だけコピーする

19:15:30 check boxの代わりにclickできる button を置いておく

SelectButton にする

TableToggleAllRowsSelectedProps はcheck boxが前提のpropsみたい

まあ変換すれば他のcomponentにも渡せるけど

19:22:02 いやまて。on/offを保持するのだから、check boxでないとだめか？

styleを変えればcheck boxでもいける？

それとも自前でcomponentを作る？

19:45:34 作るの断念した

どうしても <div> を要素いっぱいにまで大きくできない

19:48:37 見つけた

これだと親の <td>/<th> も設定しないといけないのか……

E:first-of-typeが使えるか？

19:52:19 使えた。できた

19:52:31 onclick を生やす

20:06:02 <tr> の段階で選択されているかどうか取得するにはどうすればいい

二重管理は避けたいので、 useTable が渡す変数だけでなんとかしたい

thead を無視するなら、 selectedRowIds と map の通し番号から検索できそう

20:20:41 できた

sub rowがない場合は、idに番号がそのまま入るみたい

sub rowがあるときは 0.1 みたいになる

20:21:34 選択行を削除できるようにしてみる

20:54:38 できた。が、値の更新で警告が出る

良くないuseMemo()の使い方をしているみたい

これは後で状態を親に伝える方法を調べ直したほうがよさそう

まだよくわかっていないみたいだ

もしくは、 <div> をクリックしたタイミングで更新？

無理そうだったのでコードを削除した

#2020-11-23 18:44:29