在 React 中调用作为 prop 传递的父函数

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/

控制台在我尝试调用函数 prop 时显示以下内容：

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

在 React 中调用作为 prop 传递的父函数

Call parent function passed as prop in React

javascript

twitter-bootstrap

reactjs

react-jsx