javascript - handleClick 函数不适用于父组件？

Question

我有一个 React 父组件，它使用 map 函数呈现 QuestionCard 组件列表。我试图在每个 QuestionCard 组件中放置一个 onClick 函数(我希望这个函数在父组件中，而不是 QuestionCard 组件代码中)，但它不起作用(我没有得到“工作”的控制台日志).我该如何解决这个问题，为什么首先会发生这种情况？

这是父组件的代码:

class QuestionList extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            counter: 0,
            scorekeeper: 0
        }

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        console.log('working')
    }

    render() {
        var createQuestionsList = this.props.questions.map((question, i) => {
            return <QuestionCard 
                    onClick={this.handleClick}
                    key={i} 
                    question={question.question}
                    choice1={question.choice1}
                    choice2={question.choice2}
                    choice3={question.choice3}
                    choice4={question.choice4}
                    answer={question.answer}
                   />
        });
        return (
            <div>
                {createQuestionsList}
                <button>submit answers</button>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        questions: state.questions
    };
}

export default connect(mapStateToProps)(QuestionList);

这是子组件的代码:

export default class QuestionCard extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            hideDiv: false
        }

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(choice) {
        this.setState(prevState => ({hideDiv: !prevState.hideDiv});
    }

    render() {
        return (
            <div style={{margin: '20px', display: this.state.hideDiv ? 'none' : 'block'}}>
                <div>
                    {this.props.question}
                </div>

                <div style={{
                        margin: '20px', 
                        width: '500px', 
                        display: 'flex', 
                        justifyContent: 'space-around',
                        display: this.state.hideDiv ? 'none' : 'block'
                      }}>
                    <div onClick={() => this.handleClick(this.props.choice1)}>
                        {this.props.choice1}
                    </div>
                    <div onClick={() => this.handleClick(this.props.choice2)}>
                        {this.props.choice2}
                    </div>
                    <div onClick={() => this.handleClick(this.props.choice3)}>
                        {this.props.choice3}
                    </div>
                    <div onClick={() => this.handleClick(this.props.choice4)}>
                        {this.props.choice4}
                    </div>
                </div>
            </div>
        );
    }
}

Answer 1

在您的 QuestionCard 组件中，您永远不会调用作为 props 传递的点击处理程序。

您需要调用 this.props.handleClick 来触发父级的 onClick 处理程序。

 handleClick(choice) {
     this.setState(prevState => ({hideDiv: !prevState.hideDiv});
     this.props.handleClick();
 }