我使用 react js 创建了聚光灯。我无法单击它下面的对象。我尝试将 pointerEvents: 'none' 应用于样式,但这并没有引起人们的注意。我应该如何使下面的对象可点击?
这是代码: -
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>
);
}
}
这是另一个组件:-
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>
)
}
}