CODEWITHSUNDEEP
reactjs
scully
scully

Reputation: 981

react: addEventListener is not a function error

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

Upvotes: 6

Views: 17041

Answers (3)

Ali Hesari
Ali Hesari

Reputation: 1949

I'm using version 16.6.3 of React and I also had your problem and it was solved using this method.

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

Upvotes: 1

Freddy Ochner
Freddy Ochner

Reputation: 165

You have to put a ReactDOM.findDOMNode around it.

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

Upvotes: 2

Scarysize
Scarysize

Reputation: 4291

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

Upvotes: 1

Related Questions