web-dev-qa-db-ja.com

LWCのLightning入力タグに値を渡します

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> _

そしてそれはうまくいきません。

salesforcesalesforce-lightninglwc
4
lizalav

これを行う方法を考え出した唯一の方法は、JavaScriptを使用してchecked属性を追加することです。

この例では、checkedの設定値のDOM要素にisChecked属性を手動で追加します。

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遊び場の例: https://developer.salesforce.com/docs/component-library/tools/playground/1wdderq4x/31/edit

セッターを使用する代わりにこれを行うもう1つの方法は、テンプレートがレンダリング/再レンダリングされるときはいつでもrenderedCallback()のようなものを呼び出して、this.template.querySelector('lightning-input.cb').checked = newValue;ライフサイクルのフックを使用することです。ただし、チェックされた状態のトラッキングを実際にトラッキングしていることを確認する必要があります。または、変数が変更されたときにテンプレートが再レンダリングされない可能性があります。

1
D Z

onclickおよび内部の内部の動作を追跡するためにチェックボックスにイベントを設定する必要があります。_event.target.checked_内の値を見ることができます。これがサンプルコードです。

チェックボックスタグ：

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

JavaScriptメソッド：

_hereIsTheMethod(event){
    console.log(event.target.checked);
}
_
0
Brane

私が書いたコードを参照してください、それは私に尋ねないならそれは理にかなっているはずです。

1つ以上のチェックボックスのためのあなたの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>
 _

それをシングルチェックボックスのために、それをシングルチェックボックスのためにそれを割り当てるためにそれをチェックボックスをオンにして、最後の値に応じて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遊び場のリンクを持っています。 https://developer.salesforce.com/docs/component-library/tools/playground/1_ubrgnj9/9/edit

0
Neelesh Gothania

回答は単純です、コードを変更してください。

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}
 _
0
Prashant Kashyap
<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 - チェックボックスから値を取得するために使用されます

0
Anjali