javascript - 反应模式没有得到显示
问题描述
我是反应 js 的新手。在这里,我正在做的是我想在单击按钮时显示一个模式。
export class QuestionDetails extends Component {
constructor(props) {
super(props);
this.state = {
showModal : false
}
}
questionAnalitic(analitics) {
if (!(analitics.length <= 0) || (analitics == undefined)) {
return analitics.map((analiticss) =>
<div className="col-md-8 d-flex justify-content-around questionDetailRow1">
<div>
<span><i className="fa fa-check-circle" style={{ fontSize: '24px', color: '#0f9d8f' }}></i></span><span className="ml-2">{analiticss.correct}</span>
</div>
<div>
<span> <i class="fa fa-times-circle" style={{ fontSize: '24px', color: 'rgb(251, 76, 47)' }}></i></span><span className="ml-2">{analiticss.wrong}</span>
</div>
<div>
<span className='skip-background'><i className="fa fa-fast-forward" style={{ color: 'black' }}></i></span><span className="ml-2">{analiticss.skipped}</span>
</div>
{
this.props.isInViewMode ?
null
:
<button type="button" onClick={() => this.setState({showModal: true})} className="btn btn-outline-primary">Change</button>
}
</div>
);
}
render() {
return (
// <span className="selectJdMsg alert alert-info">Please select the Question to See the more details</span>
< div className="justify-content-between align-items-center" >
<div className="row mt-2" style={{ alignItems: 'center' }} >
<h5 className="col-md-4 " style={{ paddingLeft: '15px', fontSize: '18px', fontWeight: 'bold' }}>Question {this.props.questionNo}</h5>
{this.questionAnalitic(this.props.questionAnalitics)}
</div>
{ this.state.showModal && <ConfirmationModal /> }
</div>
</div>
</div>
confirmModal.js
import React from 'react';
const ConfirmationModal = () => {
return (
<div className="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog modal-lg modal-dialog-centered" role="document">
<div className="modal-content">
<div className="modal-header">
<h6 className="modal-title" id="exampleModalLabel">Change this Question?</h6>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
<div className="row">
<div className="col-md-12 text-center ">
<span className="">
<button type="submit" className="btn btn-outline-primary modalBtnSize" data-toggle="modal" data-target="#changeQuestionModal" >Change by creating your own Question</button>
</span>
</div>
</div>
<div className="row">
<div className="col-md-12 text-center marginForOrOption">
<span>or</span>
</div>
</div>
<div className="row">
<div className="col-md-12 text-center">
<span className="">
<button type="submit" className="btn btn-primary modalBtnSize">Change and Replace from Question bank</button>
</span>
</div>
</div>
</div>
<div className="modal-footer">
{/* <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button> */}
</div>
</div>
</div>
</div>
)
}
export default ConfirmationModal;
所以,在这里我正在做的是,点击那个按钮有一个更改按钮,我正在使用状态打开一个模式。
所以我有一个showModal
默认为假的状态。现在,当我单击按钮时,状态会发生变化并变为真,并且应该从该行显示该模态,
{ this.state.showModal && <confirmModal /> }
所以这里发生的是,当我在确认模式中使用控制台日志时,它也会显示控制台日志值,但模式没有显示。
谁能帮我这个 ?
解决方案
推荐阅读
- spring-boot - 如何在 Spring Boot 微服务架构中使用 Keycloak 实现 JWT?
- android-layout - 为什么文字没有出来?
- c# - 是否可以在 Unity HoloLens 应用程序真实世界中生成自己的 Windows10 窗口
- python - 有没有办法从包装器中获取与 WindowsSpecification 对象相同的信息?
- python - 如何在 Python 字典中合并数据
- c# - 如何在表达式树中“捕获”字符串变量,而不是使用常量?
- r - ggplot 中的自定义形状(geom_point)
- java - 从 oblist 中选择准确的行信息并将其添加到文本字段中
- c++ - std::function 和 "using" 推导出的函数类型不具有相同的类型
- c# - c# 读取行并将值存储在字典中