在React

时间:2015-08-14 11:56:43

标签: javascript twitter-bootstrap reactjs react-jsx

我正在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)。

0 个答案:

没有答案