![](/img/trans.png)
[英]LWC set value in lightning-input and maxlength=“99” does not work
[英]Pass value to lightning-input tag in LWC
有誰知道如何將選中的值傳遞給 Lightning Web 組件中的復選框?
我的代碼看起來像:
import { LightningElement, track } from 'lwc'; export default class MyComponent extends LightningElement { @track isChecked; constructor() { super(); isChecked = false; } }
<template> <lightning-card title="My Card" icon-name="custom:custom9"> <div class="slds-m-around_medium"> <lightning-input type="checkbox" label="my checkbox" name="input1" checked="{isChecked}"></lightning-input> </div> </lightning-card> </template>
它不起作用。
我想出如何做到這一點的唯一方法是使用 JavaScript 添加checked
屬性。
此示例手動將checked
屬性添加到isChecked
的 setter 中的 DOM 元素。
JavaScript:
import { LightningElement, track } from 'lwc';
export default class MyComponent extends LightningElement {
@track _isChecked = false;
set isChecked(newValue) {
this._isChecked = newValue;
this.template.querySelector('lightning-input.cb').checked = newValue;
}
get isChecked() {
return this._isChecked;
}
toggleChecked() {
this.isChecked = !this.isChecked;
}
onChecboxChange(event) {
this.isChecked = event.target.checked;
}
}
HTML:
<template>
<lightning-input class="cb" type="checkbox" label="my checkbox" onchange={onChecboxChange}></lightning-input>
<br/>
<lightning-button label="Toggle Checkbox" onclick={toggleChecked}></lightning-button>
<br/>
Checked Value: {isChecked}
</template>
LWC Playground 示例: https : //developer.salesforce.com/docs/component-library/tools/playground/1wDdErq4X/31/edit
另一種代替使用 setter 的方法是使用this.template.querySelector('lightning-input.cb').checked = newValue;
renderedCallback()
生命周期鈎子來調用類似this.template.querySelector('lightning-input.cb').checked = newValue;
每當模板渲染/重新渲染時。 但是,您需要確保跟蹤已檢查狀態的變量實際上已綁定到模板的某處,否則在更改變量時模板可能不會重新呈現。
請參考我為您編寫的代碼,如果不問我應該有意義。
您的一個或多個復選框的 html
<template>
For multiple Checkbox use Checkbox Group
<lightning-checkbox-group name="Checkbox Group"
label="Checkbox Group"
options={options}
value={value}
onchange={handleChange}></lightning-checkbox-group>
<p>Selected Values are: {selectedValues}</p>
for just single Checkbox
<input type="checkbox" name="vehicle1" value="Bike" id="mycheck" onclick={myFunction}> I have a bike<br>
<p>Selected:</p> {checkvalue}
</template>
您的 js 來處理這個問題,對於單個復選框,它現在為復選框分配值(您實際要求)以保持簡單,您可以修改它以根據最后一個值分配 true false。
import { LightningElement, track } from 'lwc';
export default class CheckboxGroupBasic extends LightningElement {
@track value = ['option1'];
@track checkvalue ;
get options() {
return [
{ label: 'Ross', value: 'option1' },
{ label: 'Rachel', value: 'option2' },
];
}
get selectedValues() {
return this.value.join(',');
}
handleChange(e) {
this.value = e.detail.value;
}
myFunction(e){ // it is simple assigning value. here you can toggle value
this.checkvalue = e.target.value;
}
}
我們有 LWC Playground 鏈接,您希望看到它運行。 https://developer.salesforce.com/docs/component-library/tools/playground/1_UbRgnJ9/9/edit
<template>
<lightning-card variant="Narrow" title="Hello" icon-name="standard:account">
<lightning-input type="toggle" label="Name" onchange={displayStatus} ></lightning-input>
<lightning-card>
{displaytext}
</lightning-card>
</lightning-card>
</template>
=================================js=====================================
import { LightningElement, track } from 'lwc';
export default class ConditionalWebComponent extends LightningElement {
@track status;
@track displaytext= '';
displayStatus(event){
alert(event.target.checked);
if(event.target.checked === true){
this.displaytext = 'You are active';
}if(event.target.checked === false){
this.displaytext = 'You are inactive';
}
}
}
event.target.checked - 將用於從復選框中獲取值
您需要在復選框上設置事件以跟蹤行為,例如onclick
和 inside on 方法,您可以在event.target.checked
看到值。 這是示例代碼:
復選框標簽:
<lightning-input type="checkbox" onclick={hereIsTheMethod} label="checkbox" name="someName"></lightning-input>
Javascript方法:
hereIsTheMethod(event){
console.log(event.target.checked);
}
答案很簡單,將您的代碼更改為:
import { LightningElement, track } from 'lwc';
export default class MyComponent extends LightningElement {
@track isChecked;
constructor() {
super();
isChecked = false;
}
}
<template>
<lightning-card title="My Card" icon-name="custom:custom9">
<div class="slds-m-around_medium">
<lightning-input type="checkbox" label="my checkbox" name="input1" checked={isChecked}></lightning-input>
</div>
</lightning-card>
</template>
需要以這種方式分配被檢查的屬性:
checked={isChecked}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.