无法使用 React Refs (this.mycomponent.click()) 间接单击 React 组件，得到元素未定义的错误

Question

我不明白我做错了什么。我正在使用反应 16:

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

我正在导入我的脚本：

<script type="text/babel" src="/SiteAssets/my_script.js"></script>

和my_script.js是这个

const FileReaderElement = React.createElement;

class FileReader extends React.Component {
  constructor() {
    super();
    this.my_csv_link = React.createRef();
    this.action = this.action.bind(this);
  }

  action(e) {
    e.preventDefault();
    this.my_csv_link.current.link.click();
  }

  render() {
    return (
    <div>
      <button onClick={this.action}>
        ExportTest
      </button>
      <ReactCSV.CSVLink ref={this.my_csv_link} data="test"/>
    </div>
    );
  }
}

const domContainer = document.querySelector('#container');
ReactDOM.render(FileReaderElement(FileReader), domContainer);

我试图通过单击按钮间接单击一次 CSVLink。但是我在浏览器控制台中收到以下错误：

Uncaught TypeError: Cannot read property 'click' of undefined

我试过了

 this.my_csv_link.current.link.click(); (Cannot read property 'click' of undefined)
 this.my_csv_link.link.click(); (Cannot read property 'click' of undefined)
 this.my_csv_link.click(); (this.my_csv_link.click is not a function)
 this.my_csv_link.current.click(); (this.my_csv_link.current.click is not a function)

没有成功

我按照这篇文档文章：https://reactjs.org/docs/refs-and-the-dom.html and this similar example 构建了我的代码。

我做错了什么？

Answer 1

我尝试过的都没有用，所以我给了 CSVLink 组件一个 id，我传统上只是这样做了

document.getElementById("CSVLink").click()

Answer 2

我有类似的情况，我可以通过 ref 触发点击的唯一方法是使用

ReactDOM.findDOMNode()

这是几行额外的代码，一个额外的导入，似乎效率较低，但我不知道除了不使用 getElementById 之外，这种方法是否有任何好处。

无法使用 React Refs (this.mycomponent.click()) 间接单击 React 组件，得到元素未定义的错误

Cannot indirectly click a React component using React Refs (this.mycomponent.click()), getting the error that the element is undefined

csv

click

ref

reactjs