时间戳

首页 > 解决方案 > React ANTD DatePicker HTMLCollection 在提取元素/值时不显示实时值

javascript - React ANTD DatePicker HTMLCollection 在提取元素/值时不显示实时值

问题描述

当我使用 ANTD DatePicker 并使用箭头转到下一个面板时。UI 更新，但我无法从 HTMLCollection 或 NodeList 中提取实时值。

第一次打开面板：

    var yrCell = document.getElementsByClassName("ant-calendar-year-panel-year");

    console.log(yrCell) // logs 2019-2030 in a HTMLCollection

    for (let item of yrCell) {
        console.log(item.innerText); // logs 2019-2030
    }

    for (let i = 0; i < yrCell.length; i++) {
        console.log(yrCell[i]); // logs 2019-2030
    }

    console.log(yrCell) // logs 2019-2030 in a HTMLCollection

现在的问题是当我单击面板上的“下一步”箭头时 在此处输入图像描述

    var yrCell = document.getElementsByClassName("ant-calendar-year-panel-year");

    console.log(yrCell) // logs 2029-2040 in a HTMLCollection

    for (let item of yrCell) {
        console.log(item.innerText); // STILL logs 2019-2030
    }

    for (let i = 0; i < yrCell.length; i++) {
        console.log(yrCell[i]); // STILL logs 2019-2030
    }

    console.log(yrCell) // logs 2029-2040 in a HTMLCollection

如果 HTMLCollection 已更新并且 UI 已更新并 siaplays '后来的'值，并且在我的代码中，我在尝试从中提取特定值之前和之后读取较新的值，这些值如何不存在？

任何帮助真的很感激！

标签： javascriptreactjsantdnodelisthtmlcollection

解决方案

所以这似乎是真实与虚拟 DOM 的一些问题，我发现结果是有人使用超时来解决不同的问题。但是我在我的代码中尝试了它并且它解决了它，所以我将我的逻辑包装到这个中。

setTimeout(() => {
    [...yearCells].forEach(yearCell => {
        for (var count = 0; count < this.state.yearsThatCoveragesWereChanged.length; count++) {
            if (this.state.yearsThatCoveragesWereChanged[count].effectiveFrom === yearCell.innerText) {
                 //logic
            }
        }
    });
}, 0);

推荐阅读