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

您可以使用该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节点。

您可以使用ref回调函数来返回node。调用click()该节点以编程方式单击。

获取div节点

clickDiv(el) {
  el.click()
}

设置一ref到div节点

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

检查小提琴

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

希望能帮助到你！

在功能组件中，该原理也适用，只是语法和思维方式略有不同。

const UploadsWindow = () => {
  // will hold a reference for our real input file
  let inputFile = '';

  // function to trigger our input file click
  const uploadClick = e => {
    e.preventDefault();
    inputFile.click();
    return false;
  };

  return (
    <>
      <input
        type="file"
        name="fileUpload"
        ref={input => {
          // assigns a reference so we can trigger it later
          inputFile = input;
        }}
        multiple
      />

      <a href="#" className="btn" onClick={uploadClick}>
        Add or Drag Attachments Here
      </a>
    </>
  )

}

在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;

如果在最新版本的reactjs中不起作用，请尝试使用innerRef

class MyComponent extends React.Component {


  render() {
    return (
      <div onClick={this.handleClick}>
        <input innerRef={input => this.inputElement = input} />
      </div>
    );
  }

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