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

Question

如何在 ReactJS中 手动触发click事件？当用户单击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>

Answer 1

您可以使用该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();
  }
}

请注意 ES6箭头函数，该函数为this回调提供正确的词法作用域。还要注意，以这种方式获取的对象类似于使用会获取的对象document.getElementById，即实际的DOM节点。