supermedium / aframe-react

:atom: Build virtual reality experiences with A-Frame and React.

Home Page:https://ngokevin.github.io/aframe-react-boilerplate/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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:
screen shot 2017-06-05 at 11 41 23

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.