在选择回复

Question

我有一个问题组件，我试图阻止用户在选择答案之前离开页面。这是我的问题组件

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Questions extends Component { 
    constructor(props){
        super(props);
        score: ''      
    }
    selectScore(){
        this.setState({
            score: 'selected'
        })
    }

    render(){
        let { 
            questionCover,
            answerSelection,
            answer1, 
            answer2, 
            answer3, 
            answer4, 
            answer5,
            answer6,
            nextQuestion,
            title1,
            title2,
            back,
            questionNumber,
            selected,

        } = this.props
        return(  
        <div>
            <div className="questionContainer">
                <div className="question" id={questionCover} >
                    <h1>{title1.toUpperCase()}</h1>
        { true && <h1>{title2}</h1> }
                </div>
                <div className="answerContainer">
                    <div className="row">
                        <div 
                            id={answer1}
                            className={`answers ${selected === 1 ? 'selected' : ''}`} 
                            onClick={()=>{ 
                                this.props.selectedScore(1, questionNumber)
                                this.selectScore();
                            }}
                            >
                        </div>
                        <div 
                            id={answer2}
                            className={`answers ${selected === 2 ? 'selected' : ''}`} 
                            onClick={()=> 
                                this.props.selectedScore(2, questionNumber)
                            }
                            >
                        </div>
                        <div 
                              id={answer3}
                              className={`answers ${selected === 3 ? 'selected' : ''}`} 
                              onClick={()=> 
                                  this.props.selectedScore(3, questionNumber)
                              }
                              >
                        </div>
                    </div>
                    <div className="row">
                    <div 
                            id={answer4}
                            className={`answers ${selected === 4 ? 'selected' : ''}`} 
                            onClick={()=> 
                                this.props.selectedScore(4, questionNumber)
                            }
                            >
                        </div>
                        <div 
                            id={answer5}
                            className={`answers ${selected === 5 ? 'selected' : ''}`} 
                            onClick={()=> 
                                this.props.selectedScore(5, questionNumber)
                            }
                            >
                        </div>
                        <Link to={nextQuestion} activeClassName="active"
                            onClick={(e)=>{
                                if(!this.state.score === ''){
                                    return e.preventDefault()
                                }
                                }} 
                        >
                            <div 
                                className="answers" 
                                id={answer6}
                                onClick={()=>this.props.calculateScore()}
                            >
                            </div>
                        </Link>
                    </div>
                </div>
            </div>
            <div className="CircleContainerAlign">

                    <div className="circleContainer">
                        <Link to={`/question1`} ><div className="circles" ></div></Link>
                        <Link to={`/question2`} ><div className="circles"></div></Link>
                        <Link to={`/question3`} ><div className="circles"></div></Link>
                        <Link to={`/question4`} ><div className="circles"></div></Link>
                        <Link to={`/question5`} ><div className="circles"></div></Link>
                    </div>
            <Link to={`/`} activeClassName="active">  <div className="homeButton"></div></Link>
            {(this.state.score === 'selected')?
            <Link 
                onClick={(e)=>{
                    e.preventDefault()
                }} 
                to={back} activeClassName="active"
            >
                <div className="back"></div>
            </Link>
            :
            <Link to={back} activeClassName="active">
                <div className="back"></div>
            </Link>
            }
            </div>
        </div>
        )
    }
}


export default Questions;

我尝试使用条件e.preventDefault if(score === 'selected)在每个链接项上放置一个单独的onClick事件，但它并没有停止该事件。当我没有条件时，事件就会停止并且有效。

我还尝试创建一个三元组，使用onClick e.preventDefault呈现链接项，但后来我收到此错误

不确定this.state.score为什么会出现为空。

对我错过的东西或其他推荐方法有任何建议吗？

Answer 1

@ jdip88，乍一看，我可以看到你没有正确定义初始状态。

您能否请更换以下部分并进行测试：

constructor(props){ super(props); this.state={score: '',}
}

Answer 2

如果您仔细阅读了错误消息，则可以推断出this.state为空，而不是您提及的this.state.score - 它表示score是属性 of null。正如另一个答案建议的那样，在构造函数中定义一个初始状态并从那里开始。