javascript - 如何触发超链接点击事件-React组件

Question

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

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

  }

运行该函数时，出现以下错误:未捕获( promise 中)类型错误:无法读取 null 的属性“onClick”

如何触发点击开始下载？

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

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

Answer 1

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

我已经设置了一个沙箱来模拟你想要做的事情；在这里看看 - https://codesandbox.io/s/18k6oppy2l

关注Users.js文件

1. 我们将放置一个可见的 button和一个看不见的<a> DOM 中的标签

2. 当用户单击Download User data时按钮，检索 users 的请求已完成

3. 一旦请求解析为用户数据的字符串表示形式，我们就会调用 setState设置用户处于状态

4. 在 setState回调，然后我们以编程方式“单击”不可见的 <a>标签下载 users.csv ;这将触发文件的下载