<Link to={nextQuestion} activeClassName="active"onClick={(e)=>{if(!this.state.score === ''){返回 e.preventDefault()}}}>
this.props.calculateScore()}></链接>
<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>
<链接到={`/`} activeClassName="active"><div className="homeButton"></div></Link>{(this.state.score === '选中')?<链接onClick={(e)=>{e.preventDefault()}}to={back} activeClassName="active"><div className="back"></div></链接>:<Link to={back} activeClassName="active"><div className="back"></div></链接>}
)}}导出默认问题；
我尝试在每个链接项上放置一个单独的 onClick 事件，并带有条件 e.preventDefault if(score === 'selected)，但它不是停止事件.当我没有条件时，事件会停止并且可以工作.
我还尝试创建一个三元组，该三元组将使用 onClick e.preventDefault 呈现链接项，但随后出现此错误
不知道为什么 this.state.score 显示为 null.
对我错过的东西或其他推荐方法有什么建议吗??
解决方案
@jdip88，乍一看，我看你没有正确定义初始状态.
能否请您替换以下部分并进行测试:
构造函数(道具){超级(道具)；this.state={score: '',}
}
I have a question component and am trying to prevent users from leaving a page before selecting an answer. this is my question component
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;
i have tried putting an individual onClick event on each link item with a conditional e.preventDefault if(score === 'selected), but it wasn't stopping the event. When I don't have the conditional on it, the event is stopped and it works.
I also tried creating a ternary that would render a link item with the onClick e.preventDefault but then I am getting this error
Not sure why this.state.score is coming up as null.
Any suggestions to something I missed or another recommended method??
解决方案
@jdip88, in the first glance, I can see you have not defined initial state correctly.
Can you please replace the following section and test it:
constructor(props){
super(props);
this.state={score: '',}
}
这篇关于在反应中选择答案之前尝试阻止用户离开页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
