Salesforce LWC - 在数据列表元素上使用 querySelector 时出现错误消息

Question

我正在编写一个闪电网络组件，其中我必须将一个 <datalist> 元素分配给我的 <input> 元素之一的 list 属性，以便绑定他们。

出于某种原因，此 JS 行：

const streetsListId = this.template.querySelector('streetdatalist').id;

抛出此 JS 错误消息：

Cannot read property 'id' of null

Web 组件HTML:

<template>
    <div class="container">
        <input  id="inputstreet"
                name="inputstreet"
                type="text"
                list="streetdatalist"
                label="Search"
                onkeydown={onStreetChange}
                onblur={onStreetChange} />

        <datalist id="streetdatalist">
             <template for:each={streets} for:item='street'>
                 <option key={city.cityCode}>{city.cityName}</option>
             </template>
        </datalist>
    </div>
</template>

Web 组件 JS:

renderedCallback() {
    if (this.initialized) {
        return;
    }
    this.initialized = true;

    const streetsListId = this.template.querySelector('streetdatalist').id;
    this.template.querySelector('inputstreet').setAttribute('list', streetsListId);
}

Answer 1

通过将 querySelector 更改为 '[data-id=:

解决了这个问题

const citiesListId = this.template.querySelector('[data-id="streetdatalist"]').id;

Salesforce LWC - 在数据列表元素上使用 querySelector 时出现错误消息

Salesforce LWC - error message when using querySelector on a datalist element

javascript

salesforce

lwc