Question

我正在尝试在React中编写滚动功能。我正在通过getElementsByName捕获DOM元素。

$username = 'apikey';
$host = 'ssl://smtp.sendgrid.net';
$port = 587;

当我执行此函数时，我收到“ scrollIntoView不是函数”错误。元素已正确捕获，但scrollIntoView函数出现问题。

更新我使用的问题已解决

handleScroll=(i, e )=>{
    const {errors} = this.props
    const elementsName = Object.keys(errors)
    const elementScroll = document.getElementsByName(elementsName[i])
    elementScroll.scrollIntoView({ blok: "start", behavior: "smooth" });
}

Answer 1

问题是getElementsByName返回HTMLCollection，它是元素列表。如果您只关心第一个元素，则应该这样做：

handleScroll = (i, e) => {
    const { errors } = this.props
    const elementsName = Object.keys(errors)
    const elementScroll = document.querySelector(`[name="${elementsName[i]}"]`);
    if (elementScroll instanceof HTMLElement) {
        elementScroll.scrollIntoView({ blok: "start", behavior: "smooth" });
    }
}

如果要对集合中的每个项目执行操作，则应检查以下示例（尽管滚动到每个元素没有任何意义，因此在这种情况下无效）。

handleScroll = (i, e) => {
    const { errors } = this.props
    const elementsName = Object.keys(errors)
    const elementScrollList = document.getElementsByName(elementsName[i]);
    for (let elementScroll of elementScrollList) {
        elementScroll.scrollIntoView({ blok: "start", behavior: "smooth" });
    }
}

根据“ getElementsByName”功能滚动到React中的元素

1 个答案: