salesforce - 将值传递给 LWC 中的闪电输入标签

Question

有谁知道如何将选中的值传递给 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>

它不起作用。

Answer 1

我想出如何做到这一点的唯一方法是添加 checked属性使用 JavaScript。

此示例手动添加 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 的另一种方法是使用 renderedCallback()生命周期钩子(Hook)来调用类似 this.template.querySelector('lightning-input.cb').checked = newValue; 的东西每当模板呈现/重新呈现时。但是，您需要确保跟踪检查状态的变量实际上绑定(bind)到模板的某个位置，否则当变量更改时模板可能不会重新呈现。