react: addEventListener is not a function error

Question

i have this div inside my render method in a component

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

when i do this in componentDidMount

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

there is an error

this.domNode.addEventListener is not a function

Answer 1

You have to put a ReactDOM.findDOMNode around it.

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

Answer 2

The arguemnt (node) of your ref callback can be null. You need to check that before you bind your listener.

Note that when the referenced component is unmounted and whenever the ref changes, the old ref will be called with null as an argument.

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