在选择响应之前尝试阻止用户离开页面

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;

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

我还尝试创建一个可以使用 onClick e.preventDefault 呈现链接项的三元组，但随后出现此错误

不知道为什么this.state.score 会显示为空。

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

Answer 1

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

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

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

Answer 2

如果你仔细阅读错误信息，你可以推断出this.state 是空的，而不是像你提到的this.state.score - 它是说score 是空的属性。正如另一个答案所建议的那样，在构造函数中定义一个初始状态并从那里开始。