如何在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>
您可以使用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();
}
}
Note the 100 that provides the correct lexical scope for 101 in the callback. Also note, that the object you acquire this way is an object akin to what you would acquire using 102, i.e. the actual DOM-node.