LWC(Lightning Web Components)の些細な事
忘備録なので親切でもないし大雑把だし嘘があるかも。
共通のイベントハンドラーつかっちゃった
LWCはLightningComponentと違ってフォームで入力した値がバインドしてる変数に反映されないです。
なのでイベント拾って処理したりするのですが、
OnChageとかで共通のイベントハンドラ使っちゃうとどの変数を更新するんだよってわかんなくなります。
そんな時はEventオブジェクトから情報引っ張り出して、Reflectオブジェクトで代入すると幸せな感じになります。
handleOnChange( event ) { Reflect.set(this, event.target.name, event.target.value ); なんかの処理実行する的な・・・ }
前提としては変数名とlightning-inputのnameプロパティを同じにしとかないとダメっす。
名前
コンポーネント名とか変数名はキャメルケースで書くのですがTemplateからコンポーネントを参照するときはケバブケース(ハイフンで区切ってくやつ)にしないとダメです。
なので、
getListOppなんてのはget-list-oppにします。
これTemplateに記載するときはVS Codeのコード支援があるのですが、JSからメソドを利用したい場合はquerySelectorの文字列なのでつい間違えます。。。
そんなときはTemplateのコード支援で正しいものを教えてもらいましょう。
初期化処理
connectedCallbackはLWCのコンポーネント初期化が完了したら。
renderedCallbackはDOM操作が終わったら。
connectedCallbackで子コンポーネントのメソド呼び出そうとしたらNULLになりました。。。DOMが終わってないからか。
で、renderedCallbackに処理を移したらFirefoxで無限ループしました。
再描画の処理が入ってたからか。
回避方法はちょっと思いつかなかったです。