如何在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();
完整示例：
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 节点。
在 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;
这是 Hooks 解决方案
import React, {useRef} from 'react';
const MyComponent = () =>{
const myRefname= useRef(null);
const handleClick = () => {
myRefname.current.focus();
}
return (
<div onClick={handleClick}>
<input ref={myRefname}/>
</div>
);
}
您可以使用ref回调，它将返回node. 调用click()该节点以进行编程点击。
获取div节点
clickDiv(el) {
el.click()
}
ref给div节点设置a
<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>
</>
)
}