检索prop的值返回null或未定义

Question

我有一个带有4个可点击答案的问题组件，我正在尝试将一个值传递给道具，即

data-correct={"spice"}

这是我的答案组件中的道具之一。当我给出答案时，如果它是当前问题的正确答案，我将为该道具传递true值。

这时我只是想在点击时检索该道具的值，即

answerClick (e) {
    let tag = e.target.dataset.correct.value;
    console.log(tag)
}

我每次都会得到null或undefined的值。我尝试了多种定位方法，例如..

e.target.getAttribute('data-correct')
e.target.dataset.correct.value
e.target.attributes.getNamedItem('data-correct').value

我不确定是什么问题

作为参考，这里是完整的相关代码

      constructor(props) {
    super(props);
    this.state = {
        showStartButton: true,
        commence: false,
        level: 1,
        question: null,
        answerSet: {
            a1: null,
            a2: null,
            a3: null,
            a4: null
        },
        correctAnswer: {
            a1: true,
            a2: null,
            a3: null,
            a4: null
        },
        score: 0
    }
    this.startGame = this.startGame.bind(this);
    this.hoverEnter = this.hoverEnter.bind(this);
    this.hoverLeave = this.hoverLeave.bind(this);
    this.answerClick = this.answerClick.bind(this);
}

componentWillMount() {
    // Change game state based on level

    let tempQ;

    switch (this.state.level) {

        case 1:
        tempQ = "What is the name of the main protagonist in all of the Legend of Zelda games?";
        this.setState({answerSet:{
            a1: "Link",
            a2: "Zelda",
            a3: "Gerudo",
            a4: "Zant"
        }});
        break;

        case 2:
        tempQ = "Link has reincarnated under this title.";
        this.setState({answerSet:{
            a1: "Vanquisher",
            a2: "Ruler of the Realm",
            a3: "Hero of Time",
            a4: "The Champion"
        }});
        break;

        case 3:
        tempQ = "What is the name of the clan of females theives that Ganondorf was born into?";
        this.setState({answerSet:{
            a1: "The Deku",
            a2: "The Hylians",
            a3: "The Twili",
            a4: "The Gerudo"
        }});
        break;

        case 4:
        tempQ = "Who does Link rescue from the belly of Lord Jabu-Jabu?";
        this.setState({answerSet:{
            a1: "Zelda",
            a2: "Princess Ruto",
            a3: "Impa",
            a4: "Saria"
        }});
        break;

        case 5:
        tempQ = "The recurring legendary sword that Link aquires in the series has many names.  Which is not an official name of the sword?";
        this.setState({answerSet:{
            a1: "The Sword of Time",
            a2: "The Master Sword",
            a3: "The Sword of Old",
            a4: "The Sword that Seals the Darkness"
        }});
        break;

        default:
        console.log("somethings broke")
        break;
    }

    this.setState({question: tempQ});
}

startGame() {
    this.setState({showStartButton: false, commence: true});
    console.log(this.state.answerSet)
}

answerClick (e) {
    let tag = e.target.dataset.correct.value;
    console.log(tag)
}

hoverEnter () {
    this.setState({classes: ["Question", "hover"]})
}

hoverLeave () {
    this.setState({classes: "Question"})
}

render() {
    
    return(
        <div className={classes.GameStage}>
            <div className={classes.QuestionContainer}>
                <h1>The Legend of Zelda Trivia</h1>

                {this.state.showStartButton ? 
                    <button className={classes.StartButton} onClick={this.startGame}>START</button>
                : null }

                {this.state.commence ?
                    <Timer />
                : null }

                {this.state.commence ? 
                    <Question q={this.state.question} />
                : null }
            </div>

            {this.state.commence ?
                <div className={classes.AnswerContainer}>
                    <Answer 
                        onClick={this.answerClick}
                        onMouseEnter={this.hoverEnter} 
                        onMouseLeave={this.hoverLeave} 
                        correct={this.state.correctAnswer.a1}>
                        {this.state.answerSet.a1}
                    </Answer>
                    <Answer 
                        onClick={this.answerClick}
                        onMouseEnter={this.hoverEnter} 
                        onMouseLeave={this.hoverLeave} 
                        correct={this.state.correctAnswer.a2}>
                        {this.state.answerSet.a2}
                    </Answer>
                    <Answer 
                        onClick={this.answerClick}
                        onMouseEnter={this.hoverEnter} 
                        onMouseLeave={this.hoverLeave} 
                        correct={this.state.correctAnswer.a3}>
                        {this.state.answerSet.a3}
                    </Answer>
                    <Answer 
                        onClick={this.answerClick}
                        onMouseEnter={this.hoverEnter} 
                        onMouseLeave={this.hoverLeave} 
                        correct={this.state.correctAnswer.a4}>
                        {this.state.answerSet.a4}
                    </Answer>
                </div>
            : null }
        </div>                  
   

这是答案部分

import React from 'react';

import classes from './Answer.css';

const answer = (props) => (
    <div         
        className={classes.Answer}
        onMouseEnter={props.onMouseEnter} 
        onMouseLeave={props.onMouseLeave}
        onClick={props.onClick}
        data-correct={props.correct}>
        {props.children}
    </div>
)

export default answer;