Developer

【Lightning Web Component】繰り返し処理のinputコンポーネントの値を1つのハンドラで取得する

Developer
この記事は約5分で読めます。

こんにちは、アンダーソンです。
今回は、項目が連続している場合などに繰り返し処理で
inputコンポーネントを表示したはいいものの、ハンドラには
プロパティ埋め込めないんだね。。。
ってことで無い頭を捻ってやった方法をご紹介します。

なんだそんなことかー。
となるかもしれませんが、是非参考になる方がいれば幸いです。

スポンサーリンク

繰り返し処理でinputを表示

今回はこんな感じで項目自体が1〜5の繰り返しみたいな感じである状態で、
ユーザは一度にその項目に入力して保存するみたいな流れを想定しています。
※項目名は適当です。

ソースはこんな感じです。

<template>
    <lightning-card  variant="Narrow"  title="Test">
        <template if:true={data} for:each={data} for:item="dt">
            <div key={dt.Id}>
                <lightning-input 
                        type="text"
                        variant="brand"
                        name={dt.Id}
                        label={dt.label}
                        onchange={handleChange}
                        placeholder="ここに入力してください">
                </lightning-input>
            </div>
        </template>
    </lightning-card>
</template>
const DATA = [
    { 'Id' : '1' , 'label' : '明細1' , 'value' : ' ' },
    { 'Id' : '2' , 'label' : '明細2' , 'value' : ' ' },
    { 'Id' : '3' , 'label' : '明細3' , 'value' : ' ' },
    { 'Id' : '4' , 'label' : '明細4' , 'value' : ' ' },
    { 'Id' : '5' , 'label' : '明細5' , 'value' : ' ' },
];

export default class IteratorTest extends LightningElement {

    data = DATA;

    val1;
    val2;
    val3;
    val4;
    val5;

    handleChange(event){
        console.log(event.detail.value);
    }
}

もちろんこのままだとhandleChangeが全てのコンポーネントにセットされているので、
どこに入力されても入力された値が表示されるので、ログに出てきます。

どうやって判定したか

inputコンポーネントには、name属性があります。
ハンドラ側でそのnameを取得するという方法を取りました。
なのでコンポーネントを繰り返し表示させる際に、

    { 'Id' : '1' , 'label' : '明細1' , 'value' : ' ' },
    { 'Id' : '2' , 'label' : '明細2' , 'value' : ' ' },
    { 'Id' : '3' , 'label' : '明細3' , 'value' : ' ' },
    { 'Id' : '4' , 'label' : '明細4' , 'value' : ' ' },
    { 'Id' : '5' , 'label' : '明細5' , 'value' : ' ' },

name={dt.Id}

これが連動されるようにしておきました。

ハンドル側はこのようにしています。

    handleChange(event){
        let Id = event.target.name;
        let value = event.detail.value;
        if ( Id === 1 ) {
            val1 = value;
        } else if ( Id === 2 ) {
            val2 = value;
        } else if ( Id === 3 ) {
            val3 = value;
        } else if ( Id === 4 ) {
            val4 = value;
        } else if ( Id === 5 ) {
            val5 = value;
        }
    }

それぞれのコンポーネントを順番に取れています。
普通に考えればなんだそんなことかなんですが、
もう本当に結構考えました笑

何で判定すればいいんだ。。。となったので備忘録としてもしっかり
残しておくために書きました。

inputだけでなく繰り返し処理の際のハンドラの使い方として
様々な応用ができると思います。是非試しにやってみてください。

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。