salesforce lightning this.template.querySelector不工作

Question

<template>
    <div class="container-wrapper">
            <div if:false={loggedIn} class="slds-m-around_medium">
                    <span>Login to Salesforce App</span>
                    <lightning-input name='username' label="Username"></lightning-input>
                   <lightning-input type="password" name='password' label="Password"></lightning-input>
                   <br/>
                   <lightning-button variant="brand" label="Login" title="Login" onclick={login}></lightning-button>
           </div>
</div>
</template>
  login() {
        console.log('login attempt');
        console.log(this.template);
         var Username =this.template.querySelector('input[name="username"]').value;
        var Password =this.template.querySelector('input[name="password"]').value;
        console.log(Password);
        console.log(Username );
}  

未获取用户名、密码变量中的值。this.template.querySelector('inputname="username"').value不工作。

我还在闪电输入元素上尝试了onchange事件方法，在这种情况下，event.target是未定义的吗？我卡住了，无法读取用户输入。

app screenshot

Answer 1

在lightning-input上没有像标准HTML输入那样的属性'name‘。您应该改用'data-id‘。

HTML：

<lightning-input data-id='username' label="Username"></lightning-input>

JS：

let username = this.template.querySelector('lightning-input[data-id=username]');

Answer 2

<template>元素不是公共元素。它将其(非活动的) DOM内容保存在文档片段中，您可以通过content属性访问该片段。

因此，您应该尝试：

    var Username = this.template.content.querySelector('input[name="username"]').value;
    var Password = this.template.content.querySelector('input[name="password"]').value;

Answer 3

在Salesforce中，当您使用查询选择器访问lightning输入时，首先必须搜索lightning-input标记，而不是input标记。

其次，当您向lightning-input添加一个name属性时，该属性将传递给input标记，该标记是在呈现lightning组件时创建的。但是您不能访问input标记(我假设它在Shadow DOM中)。因此，要搜索lighting-input，您必须使用类名来标识闪电组件。

<lightning-input type="number" class="optionEditQuantityVal" value={Quantity} variant="label-hidden" step="1" max-length="1"></lightning-input>

let input = this.template.querySelectorAll('lightning-input.optionEditQuantityVal')