如何在ReactJS中手动触发点击事件？
如何在ReactJS中手动触发点击事件？
提问于 2016-10-07 17:24:52
如何在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>回答 13
Stack Overflow用户
回答已采纳
发布于 2016-10-07 17:47:45
您可以使用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();
}
}注意在回调中为this提供了正确的词法作用域的。还要注意，您以这种方式获取的对象是一个类似于使用document.getElementById__获取的对象，即实际的DOM节点。
Stack Overflow用户
发布于 2018-05-10 00:15:49
在2018年5月使用ES6 React文档作为参考时，获得了以下内容：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;Stack Overflow用户
发布于 2020-04-07 21:28:23
这里是解决方案
import React, {useRef} from 'react';
const MyComponent = () =>{
const myRefname= useRef(null);
const handleClick = () => {
myRefname.current.focus();
}
return (
<div onClick={handleClick}>
<input ref={myRefname}/>
</div>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39913863
复制相关文章
相似问题
腾讯云开发者
