Javascript 在vanilla js中的多个元素上调用click（）并作出反应

示例：

clearButtons

有两个元素。问题：

clearButton.click（）

只调用一个元素。而且应该是这样

代码如下：

从'react bootstrap Typeahead'导入{Typeahead}；
//ES2015
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
项目：[{name:'A'}，{name:'B'}]
};
}
clearInput=（）=>{
const clearButtons=document.querySelectorAll（“.rbt令牌删除按钮”）；
对于（clearButtons的常数clearButton）{
clearButton.click（）；
}  
}
render（）{
返回(
这是.\u typeahead=ref}
/>
按钮
);
}
}
render（，document.getElementById（'root'））；

让您的生活更轻松，并将基于索引的for循环替换为

for…of

-loop:

clearInput=（）=>{
const clearButtons=document.queryselectoral（“.clearbutton”）；
用于（clearButtons的常数clearButton）{
设置超时（（）=>{
clearButton.click（）；
}, 100);   
}
}
clearInput（）

按钮1
按钮2

在我对原始帖子的评论（可能不是完整答案）的继续部分，我添加此答案以演示

同样的程序只适用于循环范围的更改

clearInput=（）=>{
const clearButton=document.queryselectoral（“.clearButton”）；
for（设i=0；i{
clearButton[i]。单击（）；
}, 100);
}
}

我不知道该按钮上的处理程序是什么，但它有问题。 编辑代码。这个解决方案对我有效

  clearInput = () => {
    const clearButtons = document.querySelectorAll(".rbt-token-remove-button");
    if (clearButtons.length > 0) {
      setTimeout(() => {
        clearButtons[0].click();
        this.clearInput()
      })
    }
  }

---

只需将

const

替换为

let

即可锁定每个元素的作用域，而不仅仅是最后一个元素

你不会碰巧遇到任何控制台错误吧？看起来你越界了。你点击按钮而不是仅仅执行逻辑来完成相同的结果，这有什么原因吗？你可以包含一个包含相关元素的HTML片段。另外，为什么要用setTimeout调用

click（）

？循环应该是

for（让i=0；i

我认为问题在于访问

i

内部异步调用

setTimeout（）

。是单击第一个还是仅单击最后一个（我假设是最后一个）。此外，for循环的边界应该是

，下面是我的示例：我按照示例中的操作，但它对我不起作用。我正在使用react和react引导类型。我应该提出一个新问题吗？下面是我的例子：我和你在例子中做的一样，但这对我不起作用。我正在使用react和react引导类型。我应该提出一个新问题吗？
  clearInput = () => {
    const clearButtons = document.querySelectorAll(".rbt-token-remove-button");
    if (clearButtons.length > 0) {
      setTimeout(() => {
        clearButtons[0].click();
        this.clearInput()
      })
    }
  }