見出し画像

Lightning Web Componentsは片方向バインディング

Lightning Web Componentsで、lightning-inputとデータバインディングするには、以下のようにコードを書きます。

<lightning-input class='quantity-input' max="999" type="number" min="0" style="text-align: right;" value={_orderDetail.Quantity} step={_orderDetail.OrderUnitNumber} onchange={handleChangeQuantity}></lightning-input>

value={_orderDetail.Quantity}のところがデータバインディングしているところです。

Angularなどは、このようにデータをバインディングすると、双方向バインディングになります。つまり、コントール上のデータが変わると、バインディングした変数の値も変わります。

これは結構便利な機能です。

しかし、Lightning Web Componentsは、片方向バインディングです。つまり、コントロールに設定した値は表示するが、コントロールで入力したデータは変数に反映できません。

さらには、親コンポーネントから子コンポーネントにオブジェクトでデータを渡している場合は、子コントロール内からオブジェクト内の値を変更することができません。

例えば、上の例ではデータが変わると、handleChangeQuantityが呼び出されます。このメソッドの中で、以下のように書くとエラーになります。

this._orderDetail.Quantity = event.target.value;

では、どうするか。

子コンポーネントでコントロールのデータが変わった場合、親コンポーネントにイベント通知をして、親コントロールで値を変更する必要があります。

めんどくさいです。

ちなみに、親コンポーネントから子コンポーネントに、値でデータを渡した場合は、子コンポーネントのメソッドから値を設定することができます。

親コンポーネントからはオブジェクトで受け渡さない方がよさそうです。


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
1
生涯現役なデベロッパーを目指しています。Typescript、Javascript、Salesforceのフルスタックデベロッパーとして日々コードを綴っています。コードを綴る中で、「これは!?」と思ったものを記事にしています。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。