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

如何在ReactJS中手动触发点击事件?当用户单击element1时,我想自动触发对2597763076309129124096标记的单击。

<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>
Mamata Hegde asked 2019-11-03T10:20:53Z
5个解决方案
84 votes

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

this方法中:

<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节点。

John Weisz answered 2019-11-03T10:21:37Z
14 votes

有以下内容可在2018年5月与ES6一起使用React Docs作为参考:[https://reactjs.org/docs/refs-and-the-dom.html]

import React, { Component } from "react";
class AddImage extends Component {
  constructor(props) {
    super(props);
    this.fileUpload = React.createRef();
    this.showFileUpload = this.showFileUpload.bind(this);
  }
  showFileUpload() {
    this.fileUpload.current.click();
  }
  render() {
    return (
      <div className="AddImage">
        <input
          type="file"
          id="my_file"
          style={{ display: "none" }}
          ref={this.fileUpload}
        />
        <input
          type="image"
          src="http://www.graphicssimplified.com/wp-content/uploads/2015/04/upload-cloud.png"
          width="30px"
          onClick={this.showFileUpload}
        />
      </div>
    );
  }
}
export default AddImage;
Sir Codes Alot answered 2019-11-03T10:22:00Z
9 votes

您可以使用ref回调,该回调将返回node。在该节点上调用click()进行程序化单击。

获取ref节点

clickDiv(el) {
  el.click()
}

ref设置为div节点

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

检查小提琴

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

希望能帮助到你!

Pranesh Ravi answered 2019-11-03T10:22:54Z
1 votes

试试这个,让我知道它是否对您不利:

<input type="checkbox" name='agree' ref={input => this.inputElement = input}/>
<div onClick={() => this.inputElement.click()}>Click</div>

单击div应该模拟input元素的单击

Alex Oleksiiuk answered 2019-11-03T10:23:26Z
-2 votes

普通的旧js怎么样?例:

autoClick = () => {
 if (something === something) {
    var link = document.getElementById('dashboard-link');
    link.click();
  }
};
  ......      
var clickIt = this.autoClick();            
return (
  <div>
     <Link id="dashboard-link" to={'/dashboard'}>Dashboard</Link>
  </div>
);
Taggart Jensen answered 2019-11-03T10:23:50Z
translate from https://stackoverflow.com:/questions/39913863/how-to-manually-trigger-click-event-in-reactjs