如何在ReactJS中手动触发单击事件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (1197)

我如何手动触发ReactJS中的点击事件?当用户点击element1时,我想自动触发input标签上的点击。

<div className="div-margins logoContainer">
  <div id="element1" className="content" onClick={this.uploadLogoIcon}>
    <div className="logoBlank" />
  </div>
  <input accept="image/*" type="file" className="hide"/>
</div>
提问于
用户回答回答于

您可以使用refprop 通过回调获取对底层HTMLInputElement对象的引用,将引用存储为类属性,然后使用该引用稍后使用HTMLElement.click方法触发事件处理程序的单击。

在你的render方法中:

<input ref={input => this.inputElement = input} ... />

在你的事件处理器中:

this.inputElement.click();

注意ES6箭头函数this回调提供了正确的词法范围。还要注意,以这种方式获取的对象与将要使用的对象类似document.getElementById,即实际的DOM节点。

用户回答回答于

你可以使用ref回调函数来返回node。调用click()该节点执行程序化点击。

获取div节点

clickDiv(el) {
  el.click()
}

设置一refdiv节点

<div 
  id="element1"
  className="content"
  ref={this.clickDiv}
  onClick={this.uploadLogoIcon}
>

检查

https://jsfiddle.net/pranesh_ravi/5skk51ap/1/

扫码关注云+社区

领取腾讯云代金券