ぽっさむのプログラミングまじでわかんないブログ

2021年8月からLightning Web Componentsの勉強はじめまちた。まじでよくわかんない。

LWC onchangeはいつ動いている?

onchangeがいつ動いているのか気になったので調べてみました。


ソース

onChangeCheck.html

<template>
    <lightning-card>
        <lightning-input label="onchangeかくにん" value={inputValue} onchange={changeInputValue}></lightning-input>
        <div>{onChangeCheckValue}</div>
    </lightning-card>
</template>


onChangeCheck.js

import { LightningElement } from 'lwc';

export default class OnChangeCheck extends LightningElement {
    inputValue = 'あ';
    onChangeCheckValue = '読み込み完了';
    changeInputValue(event) {
      this.inputValue = event.target.value;
      this.onChangeCheckValue = 'onchange入った';
    }
}



初期表示
f:id:possum_possum:20210902143453p:plain

onchangeが動けば、’読み込み完了’が’onchange入った’に変わります。



入力欄の文字を変えてみよう。

f:id:possum_possum:20210902144927p:plain

と思ったら消しただけでonchange動いた。



こういうのって普通は入力値変更してフォーカスが外れたら動くんじゃないの??



もう一度初期表示に戻して「あ」を消さずに上から「あ」を入力したら・・

f:id:possum_possum:20210902144323p:plain


f:id:possum_possum:20210902163038p:plain

onchangeには入らない。



消すだけでonchangeに入るから、普通に消してからもう一度初期表示されている文字「あ」を入力してももちろんonchangeには入ってしまう。



こんな挙動なんだ。



ふーん・・



おしまい