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

Question

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

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

在 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 是您缺少的

另外不要忘记在构造函数中绑定(bind)事件处理程序!
构造函数(){
//剪断
this.chooseSquare = this.chooseSquare.bind(this);
}