Получить backgroundColor элемента onClick в React - PullRequest
Новая
       8

Получить backgroundColor элемента onClick в React

0 голосов
/ 27 июня 2018

В настоящее время я конвертирую игру для угадывания цветов RGB, которую я сделал в ванильном HTML, CSS и JavaScript, в React.

Когда я нажимаю на один из шести делителей с классом coloredSquare, я хочу, чтобы он взял backgroundColor этого квадрата и сравнил его с цветом rgb, отображаемым на экране, исходя из элемента с mainColor ID.

В vanilla JS это так просто, вы просто делаете this.style.backgroundColor внутри eventListener, но по какой-то причине с React я не могу понять это. Я чувствую себя очень глупо, и я, вероятно, думаю об этом, и это действительно очень просто.

Вот код: 

import React, {Component} from "react";

class RGBGuesser extends Component {
    constructor(){
        super();
        this.state = {
            correctCount: 0,
            displayCorrect: 0,
            colors: "", 
            chosenResult: "",
            chosenCorrect: 0,
        }
    }

    componentDidMount = () => {
        this.startGame();
    }

    initialGameState = () => {
        this.setState({
            colors: this.displayRandom(6)
        })
    }

    restart = () => {
        this.initialGameState();
        this.setState({
            chosenResult: "",
            chosenCorrect: 0,
            displayCorrect: 0
        })
    }

    pickSquare = () => {
        let colorRan = Math.floor(Math.random() * this.state.colors.length);
        return this.state.colors[colorRan]
    }

    displayRandom = amountSquares => {
        const colorArr = [];
        for(let i = 0; i < amountSquares; i++){
            colorArr.push(this.chooseRandom());
        }
        return colorArr;
    }

    chooseRandom = () => {
        let rColor = Math.floor(Math.random() * 256);
        let gColor = Math.floor(Math.random() * 256);
        let bColor = Math.floor(Math.random() * 256);
        return `rgb(${rColor}, ${gColor}, ${bColor})`;
    }

    chooseSquare = () => {
      //where i would want to do the logic of clicking the square and comparing it with the rgb color displayed on screen
    }

    startGame = () => {
        this.initialGameState();
        this.restart();
    }

    render(){
        let correctColor = this.pickSquare();
        return(
            <div>
                <h1 id="header">RGB Color Guesser</h1>
                <h3 id="mainColor">{correctColor}</h3>
                <h3 id="result"></h3>
                <h3 id="showCorrect">Number Correct: <span id="correctCount">0</span></h3>
                <button id="startOver" onClick={this.restart}>Start Over</button>
                <div id="colorGrid">
                    <div className="coloredSquare" onClick={this.chooseSquare} style={{backgroundColor: this.state.colors[0]}}></div>
                    <div className="coloredSquare" onClick={this.chooseSquare} style={{backgroundColor: this.state.colors[1]}}></div>
                    <div className="coloredSquare" onClick={this.chooseSquare} style={{backgroundColor: this.state.colors[2]}}></div>
                    <div className="coloredSquare" onClick={this.chooseSquare} style={{backgroundColor: this.state.colors[3]}}></div>
                    <div className="coloredSquare" onClick={this.chooseSquare} style={{backgroundColor: this.state.colors[4]}}></div>
                    <div className="coloredSquare" onClick={this.chooseSquare} style={{backgroundColor: this.state.colors[5]}}></div>
                </div>
            </div>
        )
    }
}

export default RGBGuesser;

1 Ответ

0 голосов
/ 27 июня 2018 
    chooseSquare = (e) => {
      console.log(e.currentTarget.style.background)
    }

Я думаю, что передача события в ваш обработчик событий, а currentTarget \ target - это то, что вам не хватает

Также не забудьте привязать ваш обработчик событий в вашем конструкторе! constructor() { // snip this.chooseSquare = this.chooseSquare.bind(this); }

...