小编典典

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

reactjs

如何在 ReactJS中 手动触发click事件?当用户单击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>

阅读 1886

收藏
2020-07-22

共1个答案

小编典典

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

在您的render方法中:

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

在事件处理程序中:

this.inputElement.click();

完整示例:

class MyComponent extends React.Component {
  render() {
    return (
      <div onClick={this.handleClick}>
        <input ref={input => this.inputElement = input} />
      </div>
    );
  }

  handleClick = (e) => {
    this.inputElement.click();
  }
}

请注意 ES6箭头函数,该函数this回调提供正确的词法作用域。还要注意,以这种方式获取的对象类似于使用会获取的对象document.getElementById,即实际的DOM节点。

2020-07-22