handleClick関数が親コンポーネントで機能していませんか？

Question

マップ機能を使用して、QuestionCardコンポーネントのリストをレンダリングする反応の親コンポーネントがあります。私は各QuestionCardコンポーネントの中にonClick関数を配置しようとしています（私はこの関数をQuestionCardコンポーネントコードではなく、親コンポーネントの中に入れたい）が動作していない（ 'working' ）。どうすればこの問題を解決できますか？そして、なぜこれが最初に起こっていますか？ここで

が親コンポーネントのコードです：

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); 

、ここでは、子コンポーネントのコードです：あなたQuestionCardコンポーネントで

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

、あなたが渡されたクリックハンドラを呼び出すことはありません小道具として。

this.props.handleClickを呼び出して、親のonClickハンドラをトリガする必要があります。 QuestionCardで

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

Answer 2

、あなたは親から小道具として渡している​​関数を呼び出していません。 this.props.handleClickは、あなたがQuestionCardにonClick小道具を通過したあなたの親方法あなたのQuestionListで

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

Answer 3

を呼び出します。それを稼働させるには、QuestionCardコンポーネントにthis.props.onClickを使用してください。次に​​のQuestionListのコンポーネントが呼び出されます。

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