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

Posted 2023-05-08

【中文标题】将值传递给 LWC 中的闪电输入标签

【英文标题】：Pass value to lightning-input tag in LWC

【发布时间】：2019-07-22 08:07:01

【问题描述】：

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

它不起作用。

【参考方案1】：

我想出如何做到这一点的唯一方法是使用 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

另一种方法是使用 renderedCallback() 生命周期钩子在模板渲染/重新渲染时调用 this.template.querySelector('lightning-input.cb').checked = newValue; 之类的东西，而不是使用 setter。但是，您需要确保跟踪检查状态的变量实际上已绑定到模板的某个位置，否则当变量更改时模板可能不会重新呈现。

【参考方案2】：

<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 - 将用于从复选框中获取值

【参考方案3】：

您需要在复选框上设置事件以跟踪行为，例如onclick，在方法内部您可以看到event.target.checked 内部的值。这是示例代码：

复选框标记：

<lightning-input type="checkbox" onclick=hereIsTheMethod label="checkbox" name="someName"></lightning-input>

Javascript 方法：

hereIsTheMethod(event)
    console.log(event.target.checked);

【参考方案4】：

请参考我为你写的代码，如果不问我应该是有意义的。

您的一个或多个复选框的 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

【参考方案5】：

答案很简单，把你的代码改成：

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 属性需要这样赋值：

checked=isChecked