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

Developer

2020.10.10

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

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

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

Contents

1 繰り返し処理でinputを表示
2 どうやって判定したか

繰り返し処理で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;
        }
    }