我正在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/
当我尝试调用函数prop时,控制台会说以下内容:
未捕获的TypeError:this.props.onQuestionAnswered不是函数
如何调用父函数?或者 - 我应该使用更好的模式吗? (第一次使用React)。