Question

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

  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();
    });

  }

运行该功能时，我收到以下错误：未捕获（承诺）TypeError：无法读取属性＆＃39; onClick＆＃39;为null

如何触发点击以开始下载？

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

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

Answer 1

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

我已经设置了一个沙箱来嘲笑你要做的事情;看看这里 - https://codesandbox.io/s/18k6oppy2l

请注意Users.js文件

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

如何触发超链接点击甚至 - 反应组件

1 个答案: