0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Lightning Web Componentsの忘備録

Last updated at Posted at 2019-07-04

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で無限ループしました。
再描画の処理が入ってたからか。
回避方法はちょっと思いつかなかったです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?