在迭代中使用 div 元素的 onclick 事件获取数据

Question

我正在尝试详细显示点击记录，为此我需要点击 div 的键值。

我尝试使用 event.target.value，但它给我的值是 0。

HTML代码

<div class="slds-scrollable_y" style="height:300px">
    <template
        for:each={contacts.data}
        for:item="contact"
    >
        <div
            class="slds-p-top_small"
            key={contact.Id}
            onclick={handleContactClick}
            id={contact.Id}
        >
            <ul>
                <li class="slds-item">
                    {contact.Name}
                </li>
                <li class="slds-item">
                    {contact.Phone}
                </li>
            </ul>

            <div class="slds-p-top_small">
                <hr>
            </div>
        </div>
    </template>
</div>

Javascript 文件

import { LightningElement, track, wire } from 'lwc';
import searchContacts from '@salesforce/apex/ContactsListController.searchContacts'
export default class ContactList extends LightningElement {
    @track searchTerm = ''
    @track contacts
    @track selectedContact = ''
    @wire(searchContacts, { searchTerm: '$searchTerm' })
    loadContacts(result) {
        this.contacts = result
    }

    handleContactSearch(event){
        //Debounce the method
        window.clearTimeout(this.delayTimeout)
        const searchTerm = event.target.value;
        // eslint-disable-next-line @lwc/lwc/no-async-operation
        this.delayTimeout = setTimeout(() => {
            this.searchTerm = searchTerm
        }, 300)
    }

    handleContactClick(event){
        // eslint-disable-next-line no-console
        console.log(event.target.value);
        this.selectedContact = event.target.value;
    }

    checkIfEmpty(){
        // eslint-disable-next-line eqeqeq
        return this.selectedcontact == '';
    }
}

我希望 event.target.value 提供联系人的 ID，但返回的是 0。

Answer 1

您应该尝试使用点击的 id <div>:

handleContactClick(event){
    // eslint-disable-next-line no-console
    console.log(event.currentTarget.id);
    this.selectedContact = event.currentTarget.id;
}

更新

根据评论将目标替换为currentTarget

在迭代中使用 div 元素的 onclick 事件获取数据

Get data using div element's onclick event in iteration

html

events

salesforce

salesforce-lightning