Spotlight in React Js

Question

I created the spotlight using react js. I am not able to click the objects below it. I tried to apply pointerEvents: 'none' to the styling but that doesn't move the spotlight. How should I make the objects below clickable?

Here is the code:-

import React from 'react';

export default class Spot extends React.Component {

  constructor(props) {
    super(props);
    this.state = { x: 0, y: 0};
  }


   _onMouseMove(e) {
    this.setState({ x: e.screenX , y: e.screenY });
    }

  render() {
    const { x, y } = this.state;
    return (
       <div className={'spot'} onMouseMove={this._onMouseMove.bind(this)} 
          style={{background: `radial-gradient(${this.props.height}px 
              ${this.props.width}px at ${x}px ${y}px , transparent 90%, 
              ${this.props.color})`, top: '0', bottom: '0', left: '0', right: 
                  '0',  position:  'absolute'}}> 
       </div>
      );
    }
  }

Here is the other component:-

import React from 'react'
import Scene from '../components/Scene'
import Sobject from '../components/Object'
import Room from '../images/level1/Room.png'
import Spot from './Spotlight.js'

export default class Level1 extends React.Component {
constructor(props) {
    super(props)
}

clickIt(){
 console.log('room')
 }

render() {
    return (
            <div>

            <Scene>
                <Sobject name={'room'} xPos={0} yPos={0}>
                    <img src={Room} height="725" width="1536" onClick= 
                      {this.clickIt.bind(this)} />
                </Sobject>
                <Spot height={200} width={200} color={'rgba(0,0,0,0.91)'} />

                </Scene>


            </div>
            )
    }
}

Tarek.Mostafa · Answer 1 · 2018-06-25T07:02:06.687

Refactor level1 component to be as follow: Please note the importance of the components sequence, if you put Spot after Sobject it will not work. Other below points are just code refactoring Use arrow functions instead of bind(this). For rendering components inside each other, instead of using {this.props.children} you could just import the component inside the parent component and added there, unless you have a specific reason for that

// level1 component

import React from "react";
import Scene from "../components/Scene.js";
import Sobject from "../components/Object.js";
import Spot from "./Spotlight.js";

export default class Level1 extends React.Component {

  render() {
    return (
      <div>
        <Scene>
          <Spot height={200} width={200} color={"rgba(0,0,0,0.91)"} />
          <Sobject name={"room"} xPos={0} yPos={0}/>        
        </Scene>
      </div>
    );
  }
}

//spotlight component

import React from "react";

export default class Spot extends React.Component {  
state = { x: 0, y: 0 }; 

  _onMouseMove =(e) =>{
    this.setState({ x: e.screenX, y: e.screenY });
  }

  render() {
    const { x, y } = this.state;
    return (
      <div
        className={"spot"}
        onMouseMove={this._onMouseMove}
        style={{
          background: `radial-gradient(${this.props.height}px ${
            this.props.width
          }px at ${x}px ${y}px , transparent 90%, ${this.props.color})`,
          top: "0",
          bottom: "0",
          left: "0",
          right: "0",
          position: "absolute"
        }}
      />
    );
  }
}

// Scene component

import React from "react";

export default class Scene extends React.Component {

  renderObjects = () => this.props.children;  

  render() {
    return (
      <div
        className={"scene-container"}
        style={{ position: "absolute", height: "100vh", width: "100%" }}
      >
        {this.renderObjects()}
      </div>
    );
  }
}

//object component

import React from "react";

export default class Sobject extends React.Component {

  click =() =>{
    console.log("clicked");
  }
  render() { // below we use default values in case the prop is not there
    const { name = "", type = "generic", xPos =0, yPos =0, ismoving =false} = this.props;
    return (
      <div
        className={"object-container"}
        style={{ left: xPos, top: yPos, position: "absolute" }}
      >
        <h1 onClick={this.click}>Hello</h1>       
      </div>
    );
  }
}

I have added the component where I am used . I tried to use onClick property on the room and tried to console.log('room') in the click function, but nothing is clickable with below the spotlight. How can I solve this? — Tech, Jun 20 '18 at 10:05
I need to check the other components, would you create a codepen or a fiddle, another thing that would enhance the code quality and solve `this` problem is to use arrow function instead of using `bind`, it will look like that ` clickIt = () => { console.log('room') } render() { // other code here } }` — Tarek.Mostafa, Jun 21 '18 at 06:01

Spotlight in React Js

1 Answers1