我有一个多选的琐事游戏,我将一个布尔值true或false传递给一个自定义数据属性。在各个答案组件中更正。
当点击答案时,我正在运行一个检查,看看正确的属性值是true还是false。
以下是其中一个答案
<Answer
onClick={this.answerClick}
onMouseEnter={this.hoverEnter}
onMouseLeave={this.hoverLeave}
correct={this.state.correctAnswer.a1}>
{this.state.answerSet.a1}
</Answer>
这里是答案组件本身
const answer = (props) => (
<div
className={classes.Answer}
onMouseEnter={props.onMouseEnter}
onMouseLeave={props.onMouseLeave}
onClick={props.onClick}
data-correct={props.correct}>
{props.children}
</div>
)
因此,单击i check查看data correct属性是否有true或false值。
answerClick(e) {
console.log(e.target.dataset.correct)
if(e.target.dataset.correct === true) {
this.setState({ score: this.state.score +1, level: this.state.level +1})
console.log('you have answered correctly')
} else {
this.setState({ level: this.state.level +1 })
console.log('you have answered incorrectly')
}
}
即使选择了正确的答案,它也只会注册一个错误的答案。我知道data correct包含true的值,因为
console.log(e.target.dataset.correct)
是否发生了我不知道的jsx/反应行为?为什么只有当data correct的值为true时,才会默认为else?任何帮助都很好。
