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
The addEventListener() method allows you to add event listeners on any HTML DOM object such as HTML elements, the HTML document, the window object, or other objects that support events, like the xmlHttpRequest object.
addEventListener("click", first, true); when clicking child element, first method will be called before second . By default, the useCapture flag is set to false which means you handler will only be called during event bubbling phase.
You have to put a ReactDOM.findDOMNode around it.
componentDidMount = () => {
ReactDOM.findDOMNode(this.domNode).addEventListener('mousedown', this.onDrag);
}
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With