将状态从react js中的禁用位置更改为启用按钮
将状态从react js中的禁用位置更改为启用按钮
提问于 2020-02-07 19:22:12
我在孩子的班级里有这个完成按钮...当单击finish按钮时，我正在尝试更改禁用按钮的状态
{currentQuest === Quizdata.length - 1 && (
<Button
onClick={() => {
this.finishQuiz();
this.pushtoDB2();
// this.disableCheckLevel();
this.props.handleDisableValue(scores); // child to parent
}}
>
Finish
</Button>
)}我有4个按钮将状态更改为false，单击完成按钮以启用单击。我有菜鸟按钮，中级按钮，中级按钮，专家按钮，大师按钮。但我想按此顺序更改状态。比方说，如果我是菜鸟，我只能在菜鸟启用时启用学生，并且启用score >=5 then学生。如果启用了学生，并且scores>=5 else保持在相同状态，则启用中间。这个问题一直持续到我的主键问题，那就是我的主键从菜鸟传给了学生，但是不能再往前移动。
这是我用来禁用状态的逻辑
disabledRook: true,
disabledStudent: true,
disabledInterm: true,
disabledExpert: true,
disabledMaster: true,//初始化状态值
handleDisableValue = scores => {
if (this.state.disabledRook && scores >= 5) {
this.setState({
disabledStudent: false
});
} else if (this.state.disabledStudent === false && scores >= 5) {
this.setState({
disabledInterm: false
});
} else if (this.state.disabledInterm === false && scores >= 5) {
this.setState({
disabledExpert: false
});
} else if (this.state.disabledExpert === false && scores >= 5) {
this.setState({
disabledMaster: false
});
} else if (this.state.disabledRook && scores < 5) {
this.setState({
disabledRook: true
});
} else if (this.state.disabledStudent && scores < 5) {
this.setState({
disabledStudent: true
});
} else if (this.state.disabledInterm && scores < 5) {
this.setState({
disabledInterm: true
});
} else if (this.state.disabledExpert && scores < 5) {
this.setState({
disabledExpert: true
});
} else if (this.state.disabledMaster && scores < 5) {
this.setState({
disabledMaster: true
});
}这就是我在创建的按钮中调用状态的地方
<Button
onClick={() => {
this.changeToquiz1();
this.articelState();
}}
>
Rookie
</Button>
<Button
disabled={this.state.disabledStudent}
onClick={() => {
this.articelState();
this.changeToquiz2();
}}
>
Student
</Button>
<Button
disabled={this.state.disabledInterm}
onClick={() => {
this.changeToquiz3();
this.articelState();
}}
>
Intermediate
</Button>
<Button
disabled={this.state.disabledExpert}
onClick={() => {
this.changeToquiz4();
this.articelState();
}}
>
Expert
</Button>
<Button
disabled={this.state.disabledMaster}
onClick={() => {
this.changeToquiz5();
this.articelState();
}}
>
Master
</Button>有什么帮助吗?谢谢
回答 1
Stack Overflow用户
发布于 2020-02-07 19:45:51
有一个问题，如果太多，如果在学生水平之后，它将在错误的条件下。我对你的问题有另一个解决方案，而不是很多布尔值，只要保持一个状态，比如关卡，一旦玩家得分超过5分，就增加关卡。
const STUDENT = 1;
const INTERN = 2;
const EXPERT =3;
const MASTER =4;
state = {
level: 0
}
handleDisableValue(score) {
if(score > 5 && this.state.level < 4) {
this.setState(prevState=> ({ level: prevState.level + 1 }));
}
}在您的按钮中：
<Button
onClick={() => {
this.changeToquiz1();
this.articelState();
}}
>
Rookie
</Button>
<Button
disabled={this.state.level < STUDENT}
onClick={() => {
this.articelState();
this.changeToquiz2();
}}
>
Student
</Button>
<Button
disabled={this.state.level < INTERN}
onClick={() => {
this.changeToquiz3();
this.articelState();
}}
>
Intermediate
</Button>
<Button
disabled={this.state.level < EXPERT}
onClick={() => {
this.changeToquiz4();
this.articelState();
}}
>
Expert
</Button>
<Button
disabled={this.state.level < MASTER}
onClick={() => {
this.changeToquiz5();
this.articelState();
}}
>
Master
</Button>我已经制作了下一级按钮的工作代码和框，一旦测验完成，你应该调用它，我只是为了演示目的而使用它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60112476
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号