Вызвать родительскую функцию, переданную как prop в React

Question

Я создаю приложение типа опроса в React. Вопросы упорядочиваются как предметы в карусели.

Когда пользователь выбирает ответ - я могу изменить состояние вопроса (установка кнопки активна). Тем не менее, я также хотел бы продвинуть карусель к следующему пункту.

var Question = React.createClass({ 
    getInitialState() { 
     return { 
      selectedIndex: -1 
     }; 
    }, 

    handleClick(index) { 
     this.setState({selectedIndex: index}); 
     this.props.onQuestionAnswered(); 
    }, 

    render() { 
     var answerItems = answerChoices.map(function (answer) { 
      return (
       <ReactBootstrap.ListGroupItem 
        key={answer.text} 
        text={answer.text} 
        active={answer.index == this.state.selectedIndex} 
        onClick={this.handleClick.bind(this, answer.index)}> 
        {answer.text} 
       </ReactBootstrap.ListGroupItem> 
       ); 
     }.bind(this)); 

     return (
      <div> 
       <h3>{this.props.qText.text}</h3> 
       <ReactBootstrap.ListGroup> 
        {answerItems} 
       </ReactBootstrap.ListGroup> 
      </div> 
     ); 
    } 
}); 

var Carousel = React.createClass({ 
    getInitialState() { 
    return { 
     index: 0, 
    }; 
    }, 

    handleSelect() { 
    this.setState({ 
     index: 1 
    }); 
    }, 

    render() { 

     var questionItems = questionContent.map(function (question) { 
      return (
       <ReactBootstrap.CarouselItem key={question.text}> 
        <Question qText={question}/> 
       </ReactBootstrap.CarouselItem> 
       ); 
     }); 

     return (
      <ReactBootstrap.Carousel interval={false} activeIndex={this.state.index} onQuestionAnswered={this.handleSelect}> 
       {questionItems} 
      </ReactBootstrap.Carousel> 
     ); 
    } 
}); 

var App = React.createClass({ 
    render() { 
     return (
     <div> 
      <h4>Survey</h4> 
      <Carousel/> 
     </div> 
     ); 
    } 
}); 


React.render(<App/>, document.getElementById('content')); 

У меня есть полный JSFiddle в наличии: http://jsfiddle.net/adamfinley/d3hmw2dn/

Console говорит следующее, когда я пытаюсь вызвать функцию пропеллер:

Uncaught TypeError: this.props.onQuestionAnswered is not a function

Что я должен сделать, чтобы позвонить родителям функционировать? Альтернативно - есть ли лучший образец, который я должен использовать? (первый раз с React).

Answer 1

Похоже, что ошибка исходит от компонента Вопроса, который не имеет опоры onQuestionAnswered. Поэтому вам просто нужно передать его в своей итерации карты questionItems.

var self = this; 
    var questionItems = questionContent.map(function (question) { 
     return (
      <ReactBootstrap.CarouselItem key={question.text}> 
       <Question onQuestionAnswered={self.handleSelect} qText={question}/> 
      </ReactBootstrap.CarouselItem> 
      ); 
    });