在 React 中获取元素 onClick 的背景颜色

Question

我目前正在将我用普通 HTML、CSS 和 JavaScript 制作的 RGB 颜色猜谜游戏转换为 React。

当我单击具有coloredSquare 类的六个 div 之一时，我希望它获取该正方形的背景颜色并将其与屏幕上显示的 rgb 颜色进行比较，该颜色来自具有 mainColor 的元素身份证。

在 vanilla JS 中非常简单，您只需在 eventListener 内执行 this.style.backgroundColor，但由于 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;

Answer 1

    chooseSquare = (e) => {
      console.log(e.currentTarget.style.background)
    }

我认为将事件传递给您的事件处理程序和 currentTarget \ target 是您所缺少的

别忘了在构造函数中绑定事件处理程序！ constructor() { // snip this.chooseSquare = this.chooseSquare.bind(this); }