我有一个模态。如果我点击背景,我希望模态消失。如果我点击模态表格,我不希望它消失。有一个问题,表单上的触发器事件冒泡到容器背景并关闭div。如果单击内部div,我希望模态不关闭。
(clearQuiz使模态消失)
以下是组件:
import React from 'react';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import { clearQuiz } from '../../actions/quiz';
import './Quiz.css';
export class Quiz extends React.Component {
handleClose(e) {
e.stopPropagation();
this.props.dispatch(clearQuiz());
}
render() {
let answers = this.props.answers.map((answer, idx) => (
<li key={idx}>{answer}</li>
));
if (this.props.usingQuiz) {
return (
<div className="quiz-backdrop" onClick={e => this.handleClose(e)}>
<div className="quiz-main">
<h2>{this.props.title} Quiz</h2>
<h3>{this.props.currentQuestion}</h3>
<ul>
{answers}
</ul>
</div>
</div>
)
}
else {
return <Redirect to="/" />;
}
}
}
const mapStateToProps = state => ({
usingQuiz: state.currentQuestion,
answers: state.answers,
currentQuestion: state.currentQuestion,
title: state.currentQuiz,
});
export default connect(mapStateToProps)(Quiz);
答案 0 :(得分:0)
根本没有通过活动!试试onClick={()=>this.handleClose()}
。