Question

我有一个反应父组件，它使用map函数呈现一个QuestionCard组件列表。我试图在每个QuestionCard组件中放置一个onClick函数（我希望这个函数在父组件内，而不是在QuestionCard组件代码中），但它不起作用（我不是获取＆＃39; working＆＃39;）的控制台日志。我怎么能解决这个问题，为什么这首先发生呢？

以下是父组件的代码：

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组件中，您永远不会将您传递的点击处理程序称为道具。

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

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

Answer 2

在QuestionCard中，您没有调用您作为父级道具传递的handleClick函数。 this.props.handleClick将调用您的父方法

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

Answer 3

在QuestionList onClick中，QuestionCard道具传递给this.props.onClick。要使其工作，请使用QuestionCard组件中的handleClick。然后将调用QuestionList组件中的handleClick(choice) { this.setState(prevState => ({hideDiv: !prevState.hideDiv}); this.props.onClick(); }。

{{1}}

handleClick函数无法在父组件上运行？

3 个答案: