如何触发超链接点击事件——react组件答案

【问题标题】：How to trigger hyperlink click even - react component如何触发超链接点击事件——react组件
【发布时间】：2017-10-05 16:11:35
【问题描述】：

在我的反应组件中，我试图触发对以下函数中创建的超链接的点击：

  getUsers(e){
    e.preventDefault();
    const { userIds } = this.props;
    BatchRoleActions.getAllRoleUsers(userIds)
    .then((users) => {
      const link = document.createElement('a');
      link.setAttribute('id', 'csvLink');
      link.setAttribute('download', 'roles.csv');
      link.setAttribute('href', users);
      document.getElementById('csvLink').onClick();
    });

  }

函数运行时出现以下错误： Uncaught (in promise) TypeError: Cannot read property 'onClick' of null

如何触发点击开始下载？

BatchRoleActions.getAllRoleUsers(userIds) 返回一个数组，其中包含要导出到 csv 文件的数据。编码URI(data:text/csv;charset=utf-8,\uFEFF${data});

我正在尝试寻找解决方案：ReactJs - How to complete onClick before download - href

【问题讨论】：

您将 OnClick 拼写错误，大写字母 O，但我们需要更多信息来帮助您
你还没有将它插入到 DOM 中。无论如何，不要将原生 DOM 方法与 React 混合使用......
最好的方法是什么？

标签： javascript reactjs

【解决方案1】：

Edit1：我误解了 OP 的要求，现在编辑我的答案！
Edit2：阅读OP的链接后进行更多编辑

我已经设置了一个沙盒来模拟您正在尝试做的事情；在这里看看 - https://codesandbox.io/s/18k6oppy2l

注意Users.js文件

我们将在 DOM 中放置一个可见的 button 和一个不可见的 <a> 标记
当用户单击Download User data 按钮时，会发出检索users 的请求
一旦请求解析为用户数据的字符串表示，我们调用setState将用户设置为状态
在setState回调中，我们以编程方式“点击”不可见的<a>标签下载users.csv；这将触发文件的下载

【讨论】：

我正在尝试将数据导出到 csv 文件。 atchRoleActions.getAllRoleUsers(userIds) 返回一个数组，其中包含要导出到 csv 文件的数据。 encodeURI(data:text/csv;charset=utf-8,\uFEFF${data});
我的错，误解了你的要求。我现在已经编辑了我的答案，请看一下！
我不希望在 render 上获取用户数据。我希望用来自按钮的数据 onClick 填充我的 href，然后调用 getUsers 函数并开始下载。请查看我原来问题中的链接
再次编辑了我的答案，现在通过单击按钮获取数据，然后触发下载（通过提供对 setState 调用的回调）
嗨拉古德万。谢谢。我正在开始一个新的令人兴奋的项目，需要 3 个反应开发人员。能不能加入。怎么联系你？