如何在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>
发布于 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节点。
发布于 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;
发布于 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>
);
}
https://stackoverflow.com/questions/39913863
复制相似问题