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

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

应用截图

标签： salesforce-lightning

Answer 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]');