Lwc自定义开发过程中,我们经常会用到【track】来声明变量,用来在html中表示它的值,例如下边在html的【lightning-input】标签中绑定js中的一个变量,然后在一个按钮事件中清空它,我们一起来看看效果如何吧
lightingWebComponentExampleForLwc1.html
<template>
<div class="app slds-p-around_x-large">
<lightning-layout vertical-align="end">
<lightning-layout-item>
<lightning-input label="名前" value={name}></lightning-input>
</lightning-layout-item>
<lightning-layout-item>
<lightning-button-icon icon-name="utility:close" onclick={handleClick}></lightning-button-icon>
</lightning-layout-item>
</lightning-layout>
</div>
</template>
lightingWebComponentExampleForLwc1.js
import { LightningElement,track } from 'lwc';
export default class LightingWebComponentExampleForLwc1 extends LightningElement {
@track name;
handleClick() {
this.name = '';
}
}
第一遍输入框中输入【AAAAA】,然后点击×按钮,我们看到输入的值被正常清空了,接着我们在一次输入【BBBBB】,再次按下×按钮后,我们发现值没有被正常清空,这是怎么回事呢。
第一次按下×按钮之后,变量【name】的值已经被清空,这时候我们输入【BBBBB】,然后按下×按钮,变量【name】的值又一次被清空,两次按下时,变量【name】的值并没有发生变化,所以页面没有被加载,导致我们看到页面值并没有发生变化。
我们可以每次输入时,都去重新给变量赋值,这样每次按下×按钮时,值都会发生变化,就可以解决这个问题。
lightingWebComponentExampleForLwc1.html
<template>
<div class="app slds-p-around_x-large">
<lightning-layout vertical-align="end">
<lightning-layout-item>
<lightning-input label="名前" value={name} onchange={handleChange}></lightning-input>
</lightning-layout-item>
<lightning-layout-item>
<lightning-button-icon icon-name="utility:close" onclick={handleClick}></lightning-button-icon>
</lightning-layout-item>
</lightning-layout>
</div>
</template>
lightingWebComponentExampleForLwc1.js
import { LightningElement,track } from 'lwc';
export default class LightingWebComponentExampleForLwc1 extends LightningElement {
@track name;
handleClick() {
this.name = '';
}
handleChange(event) {
this.name = event.target.value;
}
}
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。