Salesforce学习 Lwc（十六）【track声明的变量与html项目绑定①】

原创

repick

修改于 2021-03-16 10:02:10

1.5K0

修改于 2021-03-16 10:02:10

文章被收录于专栏：SalesforceSalesforce

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;
    }
}