Javascript 在react中选择回答之前尝试阻止用户离开页面

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

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;

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
类问题扩展了组件{
建造师（道具）{
超级（道具）；
分数：“”
}
selectScore（）{
这是我的国家({
分数：“选定”
})
}
render（）{
让{
问题封面，
回答者选择，
答复1：，
答复2：，
答复3：，
答复4：，
答复5：，
答复6：，
下一个问题，
标题1，
标题2，
返回
问题编号，
挑选出来的，
}=这是道具
报税表（
{title1.toUpperCase（）}
{true&&{title2}}
{ 
此.props.selectedScore（1，问题编号）
这是。selectScore（）；
}}
>
此.props.selectedScore（2，问题编号）
}
>
此.props.selectedScore（3，问题编号）
}
>
此.props.selectedScore（4，问题编号）
}
>
此.props.selectedScore（5，问题编号）
}
>
{
如果（！this.state.score==''）{
返回e.preventDefault（）
}
}} 
>
this.props.calculateScore（）}
>
{（this.state.score==='selected'）？
{
e、 预防默认值（）
}} 
to={back}activeClassName=“active”
>
:
}
)
}
}
导出默认问题；

我已经尝试在每个链接项上放置一个单独的onClick事件，并带有条件的

e.preventDefault

if（score=='selected）

，但它没有停止事件。当我没有条件时，事件就会停止，并且它会工作

我还尝试创建一个三元结构，用onClick

e.preventDefault

呈现一个链接项，但我得到了这个错误

不确定为什么

此.state.score

显示为空

---

对我遗漏的内容或其他推荐方法有什么建议吗？？？

@jdip88，乍一看，我可以看出您没有正确定义初始状态

请更换以下部分并对其进行测试：

构造函数（道具）{
超级（道具）；
this.state={score:''，}

}

如果仔细阅读错误消息，您可以推断

this.state

为null，而不是像您提到的

this.state.score

——这意味着

score

是null的属性。正如另一个答案所建议的那样，在构造函数中定义一个初始状态并从那里开始。

smh这就是你连续数小时不间断地编写代码的结果，愚蠢的错误，谢谢