Event triggers after component has unmounted
natseg opened this issue · comments
Here are my aframe dependencies from package.json:
"dependencies": {
"aframe": "^0.5.0",
"aframe-animation-component": "^3.2.5",
"aframe-extras": "^3.7.0",
"aframe-particle-system-component": "^1.0.9",
"aframe-react": "^4.2.4",
"aframe-text-geometry-component": "^0.5.1"
}
The bug can be experienced here: https://natseg.github.io/blank-slate/ when passing the door to the ThirdScene
/HopScotch
.
Clicking anywhere triggers the event changing the cursor changing colour.
Here is my component code:
import React, { Component } from 'react';
import { Entity } from 'aframe-react';
import PropTypes from 'prop-types';
import withTimeOut from './withTimeOut';
class StepTarget extends Component {
constructor(props, context) {
super(props, context);
this.handleClick = this.handleClick.bind(this);
}
render() {
const { src, position, rotation } = this.props;
return (
<Entity
id='steps'
geometry={{ primitive: 'circle', radius: 0.55 }}
animation={{ property: 'scale', dir: 'alternate', dur: 250, repeat: 3, to: '1.1 1.1 0.05' }}
material={{ src }}
position={ position }
events={{ click: this.handleClick }}
rotation={ rotation }
/>
);
}
handleClick() {
const { onClick, onClickParams } = this.props;
if ( onClickParams && event.target.id === 'steps') {
onClick(onClickParams);
} else if (event.target.id === 'steps') {
onClick();
}
}
}
StepTarget.propTypes = {
position: PropTypes.string,
src: PropTypes.string,
rotation: PropTypes.string
};
StepTarget.defaultProps = {
position: '0.025 1 2',
src: '#steps',
rotation: '0 0 0',
};
export default withTimeOut(StepTarget);
I logged out what I thought would be useful for debugging:
StepTarget
is wrapped in a higher-order component. Both components unmount (and do not mount again) before the function handleClick
is triggered.
Let me know if I can give more information.