如何解决防止在每次点击时添加DOM元素
我有以下脚本,该脚本获取具有给定类的DOM元素,并将其添加到数组中。然后,它遍历数组,并将值添加到WordPress Gutenberg中option
组件的SelectControl
元素中。我可以将元素放入下拉列表中的数组中,但是在控制台中收到以下错误:Uncaught TypeError: Cannot read property 'appendChild' of null
。选择后,它也不会在选择组件中显示所选选项,并且每次从下拉列表中选择一个选项时,都会在下拉列表中复制数组选项。
我怀疑这可能是执行顺序问题,但不确定:
setTimeout(() => {
let headers = [...document.querySelectorAll('.wp-block-heading')].map(item => item.innerText);
const select = document.getElementById('selectheader');
for (let i = 0; i < headers.length; i++) {
let opt = headers[i];
let el = document.createElement('option');
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
},1000);
<SelectControl
value={[headers]}
id="selectheader"
options={[headers]}
onChange={setJumpLink}
/>
解决方法
它实际上需要:
if (select && select.innerHTML) {
select.innerHTML = '';
}
在循环之前。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。