在香草js中的多个元素上调用click()并做出反应

时间:2019-08-15 17:07:37

标签: javascript reactjs typeahead bootstrap-typeahead

示例:clearButtons有两个元素。问题:clearButton.click()仅在一个元素上调用。而且应该

此处的代码:https://stackblitz.com/edit/react-6bam4e

import {Typeahead} from 'react-bootstrap-typeahead';
 // ES2015

class App extends Component {
  constructor() {
    super();
    this.state = {
      items: [{name: 'A'}, {name: 'B'}]
    };
  }

  clearInput = () => {
    const clearButtons = document.querySelectorAll(".rbt-token-remove-button");  
      for (const clearButton of clearButtons) {   
          clearButton.click();  
      }  
  }

  render() {
    return (
      <div>
         <Typeahead
            id={'example4'}
            defaultSelected={this.state.items.slice(0, 3)}
            /*disabled = {this.state.selectGroupTasksId === ''}*/
            labelKey="name"
            multiple
            options={this.state.items}
            placeholder="Choose ..."
            ref={(ref) => this._typeahead = ref}
          />
          <button onClick={this.clearInput }>Button</button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

4 个答案:

答案 0 :(得分:3)

让您的生活更轻松,并用for...of循环替换基于索引的for循环:

clearInput = () => {
    const clearButtons = document.querySelectorAll(".clear-button");  
    for (const clearButton of clearButtons) {
        setTimeout(() => {
          clearButton.click(); 
        }, 100);   
    }
}

clearInput()
<button class="clear-button" onclick="console.log('button 1')">Button 1</button>
<button class="clear-button" onclick="console.log('button 2')">Button 2</button>

答案 1 :(得分:3)

在继续我对原始帖子的评论(可能不是完整的答案)时,我将添加此答案以进行演示。

同一程序仅用于循环绑定更改。

if getattr(sys, 'frozen', False): 
    # executed as a bundled exe, the driver is in the extracted folder
    chromedriver_path = os.path.join(sys._MEIPASS, "chromedriver.exe")
    browser = webdriver.Chrome(chromedriver_path)
    IEdriver_path = os.path.join(sys._MEIPASS, "IEDriverServer")
    browser = webdriver.Chrome(IEdriver_path)


chromedriver = "C:\\Users\\NDEERING\\Desktop\\Python\\chromedriver.exe"
browser = webdriver.Chrome(executable_path=chromedriver)
IeDriver = "C:\\Users\\NDEERING\\Desktop\\Python\\IEDriverServer.exe"
browseri = webdriver.Ie(executable_path=IeDriver)

答案 2 :(得分:2)

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

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

答案 3 :(得分:1)

只需将const替换为let即可锁定每个元素的作用域,而不仅仅是最后一个元素!