React 中的事件传播

Question

我有一个模态。如果我点击背景，我希望模态消失。如果我单击模态表单，我不希望它消失。存在表单上的触发事件冒泡到容器背景并关闭 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); 

Answer 1

根本不要通过这个活动！试试onClick={()=>this.handleClose()}。