0

Есть код

import React from 'react';

import './styles/BackGround.scss';
import Star from './Star.js';

class BackGround extends React.Component{
	constructor(props){
		super(props);

		this.state = { mouseCoordinates: {
			x: 0,
			y: 0,
		}};

		this._onMouseMove = this._onMouseMove.bind(this);
	}

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

	render(){
		let x = this.state.x / 10, y = this.state.y / 10;

		console.log(x + " " + y);
		return(
			<div className='bg' onMouseMove={this._onMouseMove}>
				<Star size={4} leftIndent={x} topIndent={y}/>
			</div>
		);
	}
}

export default BackGround;

и еще код

import React from 'react';

class Star extends React.Component{
	constructor(props){
		super(props);

		this.state = {
			values: {
				position: "fixed",
				backgroundColor: "#F0FFFF",
				borderRadius: "50%",
				height: this.props.size + "px", 
				width: this.props.size + "px",
				marginLeft: this.props.leftIndent + "px",
				marginTop: this.props.topIndent + "px",
			},
		}
	}	
	render(){
		return(
			<div style={this.state.values}></div>
		);
	}
}

export default Star;

при этом при выполнении шарик который по идеи зависит от положения мыши не движется, хоть и сами координаты выводятся в консоль успешно введите сюда описание изображения

вопрос в том, как исправить эту ситуацию

1 ответ 1

1

В классе Star вы только инициализируете state в конструкторе. Больше он не меняется. Вам вообще не нужен state в классе Star

Сделайте

class Star extends React.Component{
    render(){
        let values = {
            position: "fixed",
            backgroundColor: "#F0FFFF",
            borderRadius: "50%",
            height: this.props.size + "px", 
            width: this.props.size + "px",
            marginLeft: this.props.leftIndent + "px",
            marginTop: this.props.topIndent + "px",
        };

        return(
            <div style={values}></div>
        );
    }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.