[英]Pass value to lightning-input tag in LWC
Does anyone know how to pass checked value to checkbox in Lightning Web Component?有谁知道如何将选中的值传递给 Lightning Web 组件中的复选框?
My code looks like:我的代码看起来像:
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>
and it doesn't work.它不起作用。
The only way I have figured out how to do this is to add the checked
attribute using JavaScript.我想出如何做到这一点的唯一方法是使用 JavaScript 添加checked
属性。
This example manually adds the checked
attribute to the DOM element in the setter for isChecked
.此示例手动将checked
属性添加到isChecked
的 setter 中的 DOM 元素。
JavaScript: 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: 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>
Example in LWC Playground: https://developer.salesforce.com/docs/component-library/tools/playground/1wDdErq4X/31/edit LWC Playground 示例: https : //developer.salesforce.com/docs/component-library/tools/playground/1wDdErq4X/31/edit
Another way to do this instead of using a setter is to use the renderedCallback()
lifecycle hook to invoke something like this.template.querySelector('lightning-input.cb').checked = newValue;
另一种代替使用 setter 的方法是使用this.template.querySelector('lightning-input.cb').checked = newValue;
renderedCallback()
生命周期钩子来调用类似this.template.querySelector('lightning-input.cb').checked = newValue;
whenever the template renders/re-renders.每当模板渲染/重新渲染时。 However, you will need to ensure the variable tracking the checked state is actually bound to the template somewhere, or else the template may not re-render when the variable is changed.但是,您需要确保跟踪已检查状态的变量实际上已绑定到模板的某处,否则在更改变量时模板可能不会重新呈现。
Please refer the code I have written for you, it should make sense if not ask me.请参考我为您编写的代码,如果不问我应该有意义。
Your html for one or more check box您的一个或多个复选框的 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>
Your js to handle that, For single checkbox right now it assign value (you actuallu asked for ) to check box to keep it simple you can modify it to assign true false depending on last value.您的 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;
}
}
We have LWC Playground link you want to see it working.我们有 LWC Playground 链接,您希望看到它运行。 https://developer.salesforce.com/docs/component-library/tools/playground/1_UbRgnJ9/9/edit 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 - will be used to get value from checkbox event.target.checked - 将用于从复选框中获取值
You need to set event on the checkbox in order to track the behavior for example onclick
and inside on method you can see the value inside event.target.checked
.您需要在复选框上设置事件以跟踪行为,例如onclick
和 inside on 方法,您可以在event.target.checked
看到值。 Here is sample code:这是示例代码:
Checkbox tag:复选框标签:
<lightning-input type="checkbox" onclick={hereIsTheMethod} label="checkbox" name="someName"></lightning-input>
Javascript method: Javascript方法:
hereIsTheMethod(event){
console.log(event.target.checked);
}
The answer is simple, change your code to:答案很简单,将您的代码更改为:
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>
The checked property needs to be assigned this way:需要以这种方式分配被检查的属性:
checked={isChecked}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.