销售人员闪电 this.template.querySelector 不工作答案

【问题标题】：salesforce lightning this.template.querySelector not working销售人员闪电 this.template.querySelector 不工作
【发布时间】：2019-10-31 08:13:46
【问题描述】：

<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('input[name="username"]').value 不起作用。

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

app screenshot

【问题讨论】：

标签： salesforce-lightning

【解决方案1】：

闪电输入没有像标准 HTML 输入那样的属性“名称”。您应该改用“data-id”。

HTML：

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

JS：

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

【讨论】：

这工作得很好。应标记为已接受。

【解决方案2】：

<template> 元素不是通用元素。它将其（非活动）DOM 内容保存在一个文档片段中，您可以通过 content 属性访问该内容。

因此你应该尝试：

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

【讨论】：

his.template.content 未定义？ @Supersharp
@AjayKelkar 我不知道你如何填写这个值。这取决于您没有显示的代码
它在文本框中的用户输入，它在弹出实用程序下运行。查看上述问题中的应用截图

【解决方案3】：

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

其次，当您向闪电输入添加名称属性时，该属性将传输到在渲染闪电组件时创建的输入标签。但是您不能访问输入标签（我的假设是它在 Shadow DOM 中）。因此，要搜索光照输入，您必须使用类名来识别闪电组件。

<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')

【讨论】：