diff --git a/src/Transition.js b/src/Transition.js index 8ae11270..d67b39fe 100644 --- a/src/Transition.js +++ b/src/Transition.js @@ -222,19 +222,18 @@ class Transition extends React.Component { if (nextStatus !== null) { // nextStatus will always be ENTERING or EXITING. this.cancelNextCallback() - const node = ReactDOM.findDOMNode(this) if (nextStatus === ENTERING) { - this.performEnter(node, mounting) + this.performEnter(mounting) } else { - this.performExit(node) + this.performExit() } } else if (this.props.unmountOnExit && this.state.status === EXITED) { this.setState({ status: UNMOUNTED }) } } - performEnter(node, mounting) { + performEnter(mounting) { const { enter } = this.props const appearing = this.context.transitionGroup ? this.context.transitionGroup.isMounting @@ -246,43 +245,43 @@ class Transition extends React.Component { // if we are mounting and running this it means appear _must_ be set if (!mounting && !enter) { this.safeSetState({ status: ENTERED }, () => { - this.props.onEntered(node) + this.props.onEntered(ReactDOM.findDOMNode(this)) }) return } - this.props.onEnter(node, appearing) + this.props.onEnter(ReactDOM.findDOMNode(this), appearing) this.safeSetState({ status: ENTERING }, () => { - this.props.onEntering(node, appearing) + this.props.onEntering(ReactDOM.findDOMNode(this), appearing) - this.onTransitionEnd(node, enterTimeout, () => { + this.onTransitionEnd(enterTimeout, () => { this.safeSetState({ status: ENTERED }, () => { - this.props.onEntered(node, appearing) + this.props.onEntered(ReactDOM.findDOMNode(this), appearing) }) }) }) } - performExit(node) { + performExit() { const { exit } = this.props const timeouts = this.getTimeouts() // no exit animation skip right to EXITED if (!exit) { this.safeSetState({ status: EXITED }, () => { - this.props.onExited(node) + this.props.onExited(ReactDOM.findDOMNode(this)) }) return } - this.props.onExit(node) + this.props.onExit(ReactDOM.findDOMNode(this)) this.safeSetState({ status: EXITING }, () => { - this.props.onExiting(node) + this.props.onExiting(ReactDOM.findDOMNode(this)) - this.onTransitionEnd(node, timeouts.exit, () => { + this.onTransitionEnd(timeouts.exit, () => { this.safeSetState({ status: EXITED }, () => { - this.props.onExited(node) + this.props.onExited(ReactDOM.findDOMNode(this)) }) }) }) @@ -322,7 +321,8 @@ class Transition extends React.Component { return this.nextCallback } - onTransitionEnd(node, timeout, handler) { + onTransitionEnd(timeout, handler) { + const node = ReactDOM.findDOMNode(this); this.setNextCallback(handler) const doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener diff --git a/test/Transition-test.js b/test/Transition-test.js index 6d37eed7..790d3c0f 100644 --- a/test/Transition-test.js +++ b/test/Transition-test.js @@ -465,13 +465,13 @@ describe('Transition', () => { }) describe('node in callbacks', () => { - it('use stale nodes', done => { + it('does not use stale nodes', done => { const enteringNode = React.createRef(); const enteredNode = React.createRef(); function makeAssertions() { - expect(enteringNode.current.nodeName).toBe('H1'); - expect(enteredNode.current.nodeName).toBe('H1'); + expect(enteringNode.current.nodeName).toBe('H2'); + expect(enteredNode.current.nodeName).toBe('H3'); done(); }