闪电输入中的 LWC 设置值和 maxlength="99" 不起作用答案

【问题标题】：LWC set value in lightning-input and maxlength="99" does not work闪电输入中的 LWC 设置值和 maxlength="99" 不起作用
【发布时间】：2021-03-29 14:23:17
【问题描述】：

我想在点击按钮数量后设置闪电输入的值，但它不起作用。并且输入中的 maxlength 也不起作用。它应该设置为最大 99，但也可以设置为 9999999999999999999。

html模板：

<div>
  <lightning-button-group key={product.Id}>
    <lightning-button 
      name={product.Id}
      value={product.Id}  
      class="button" 
      label="-" 
      onclick={handleQuantityDown}>
    </lightning-button>
    <lightning-input 
      type="number" 
      name={product.Id} 
      value={textValue} 
      placeholder="1" 
      minlength="1" 
      maxlength="99" 
      onchange={handleChangeInput}>
    </lightning-input>
    <lightning-button 
      name={product.Id}
      value={product.Id}
      class="button" 
      label="+" 
      onclick={handleQuantityUp}>
    </lightning-button>
  </lightning-button-group>
</div>
<div>
  <lightning-button-group key={product.Id}>
    <lightning-button 
      name={product.Id}
      value={product.Id}  
      class="button" 
      label="-" 
      onclick={handleQuantityDown}>
    </lightning-button>
    <lightning-input 
      type="number" 
      name={product.Id} 
      value={textValue} 
      placeholder="1" 
      minlength="1" 
      maxlength="99" 
      onchange={handleChangeInput}>
    </lightning-input>
    <lightning-button 
      name={product.Id}
      value={product.Id}
      class="button" 
      label="+" 
      onclick={handleQuantityUp}>
    </lightning-button>
  </lightning-button-group>
</div>

js:

import { LightningElement } from 'lwc';
  export default class Display extends LightningElement {
  clickedButtonQuantityPlus;

  handleQuantityUp(event) {
    this.clickedButtonQuantityPlus = event.target.name;  // get name/ProductID from the button
    let input = this.template.querySelector('lightning-input[name=' + this.clickedButtonQuantityPlus + ']');  // set input with ProductID from button
    input.value = input.value + 1;  // set input value
  }
}

如何编辑？

【问题讨论】：

标签： javascript salesforce lwc

【解决方案1】：

maxlength 决定了字段中允许的最大字符数，而不是值。

要使最大值为 99，您应该使用以下 sn-p。

<template>
    <lightning-input type="number" label="Input" maxlength="2">
    </lightning-input>
</template>

有关更多信息，您可以参考以下文档链接： https://developer.salesforce.com/docs/component-library/bundle/lightning-input/specification

【讨论】：

是的，maxlength 限制字符数，而不是值。是的，标签是必需的。谢谢。
我如何从输入中获取或设置值？在页面上时更多相同的输入。只有输入的名称不同。 this.template.querySelector('lightning-input[name=' + this.clickedButtonQuantityPlus + ']').value 其中this.clickedButtonQuantityPlus 是输入的名称不起作用。
您可以使用闪电输入中的onchange方法来跟踪更新。查询模板不是最佳做法。
可以从方法handleChangeInput 中获取值：import { LightningElement } from 'lwc'; export default class Display extends LightningElement { clickedButtonQuantityPlus; inputQuantity; handleChangeInput(event) { this.inputQuantity = event.detail.value; // get value from input } } 但是当有人单击buttonQuantityUp、buttonQuantityDown 或buttonAddToCart 时，我想从输入中获取值。而且我不知道如何通过事件 onclick 做到这一点。还是应该使用其他一些事件？ Sample
您应该将值存储在组件 js var 中。如果您正在点击 btn，请确定点击了哪个 btn，相应地更改值。在值发生变化时，组件将重新呈现自己以显示最新值