React：addEventListener不是一个函数错误。

Question

我在组件的render方法中有一个div元素。

<div ref={node => this.domNode = node} style={this.getStyle()}>{ this.props.children }</div>

当我在componentDidMount中执行这个操作时

this.domNode.addEventListener('mousedown', this.onDrag); 

有错误发生

this.domNode.addEventListener is not a function

- scully

Answer 1

你需要在它周围放置一个ReactDOM.findDOMNode。

componentDidMount = () => {
   ReactDOM.findDOMNode(this.domNode).addEventListener('mousedown', this.onDrag);
}

- Freddy Ochner

Answer 2

你的ref回调函数的参数（node）可能是null。在绑定监听器之前，你需要检查它。

请注意，当引用的组件被卸载以及每次ref更改时，旧的ref将被调用并带有null作为参数。

来自https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute

- Scarysize

---

你在哪个生命周期函数中调用了 addEventListener？ - Scarysize

我做了这个，如果（this.domNode != null）{ this.domNode.addEventListener('mousedown', this.onDrag); }但我仍然有相同的错误。 - scully

如果您在 div 上有 ref，则节点应该是实际的 DOM 节点。 - Scarysize

当我记录这个.domNode时，它记录了一个构造函数。 - scully

你能在你的ref回调函数中加上一些花括号吗？{this.domNode = node} - Scarysize

Answer 3

我正在使用React的版本16.6.3，我也遇到了您的问题，并且通过使用这种方法解决了它。

componentDidMount() {
    let domNode = ReactDOM.findDOMNode(this.domNode);
    if(domNode) {
      domNode.addEventListener('mousedown', this.props. onDrag);
    }
}

- Ali Hesari