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

Question

如何在 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>

原文由 Mamata Hegde 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 ref 属性通过回调获取对底层 HTMLInputElement 对象的引用，将该引用存储为类属性，然后使用该引用稍后使用 HTMLElement 从事件处理程序触发点击。点击 方法。

在您的 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 节点。_

原文由 John Weisz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是 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>
    );
}

原文由 Sajad Saderi 发布，翻译遵循 CC BY-SA 4.0 许可协议