javascript - React如何设置父组件的状态

Question

在我的例子中，TopicList 是父组件，IndividualTopic 是子组件。当用户单击子组件时，它会将 showTopicDescription 的状态更改为 true。但是，如何将showTopicDescription的值传递给父组件(TopicList)或直接设置父组件状态？

var TopicsList = React.createClass({

    render: function () {
        return (
            <div className="row">
                <IndividualTopic topic_no="1">
                    Topic 1
                </IndividualTopic>
                <IndividualTopic topic_no="2">
                    Topic 2
                </IndividualTopic>
                <IndividualTopic topic_no="3">
                    Topic 3
                </IndividualTopic>
                <IndividualTopic topic_no="4">
                    Topic 4
                </IndividualTopic>
                <div className="col-sm-12">
                    { this.state.showTopicDescription ? <IndividualTopicPages /> : null }
                </div>
            </div>
        );
    }
});

var selected_topic_no;

var IndividualTopic = React.createClass({
    getInitialState: function() {
        return { showTopicDescription: false };
    },
    onClick: function() {
        this.setState({ showTopicDescription: true });
        selected_topic_no = this.props.topic_no - 1;
    },
    render: function () {
        return (
            <div>
                <div className="col-sm-2">
                    <div onClick={this.onClick} className="single-topic" data-topic-no={this.props.topic_no}>
                        {this.props.children}
                    </div>
                </div>
            </div>
        );
    }

});

Answer 1

IndividualTopic 的 click handler 使用我们在父组件的 render 方法中注册的 this.props 调用父组件的 setTopicDescription 函数。引用下面的代码 -

var TopicsList = React.createClass({
    setTopicDescription: function(topicDescription){
     //HERE WE GET THE TOPIC DESCRIPTION FLAG. CHEEERS WE CAN DO WHAT WE NEED OVER HERE  
    },
    render: function () {
        return (
            <div className="row">
                <IndividualTopic topic_no="1" setTopicDescription={this.setTopicDescription} >
                    Topic 1
                </IndividualTopic>
                <IndividualTopic topic_no="2" setTopicDescription={this.setTopicDescription}>
                    Topic 2
                </IndividualTopic>
                <IndividualTopic topic_no="3" setTopicDescription={this.setTopicDescription}>
                    Topic 3
                </IndividualTopic>
                <IndividualTopic topic_no="4" setTopicDescription={this.setTopicDescription}>
                    Topic 4
                </IndividualTopic>
                <div className="col-sm-12">
                    { this.state.showTopicDescription ? <IndividualTopicPages /> : null }
                </div>
            </div>
        );
    }
});

var selected_topic_no;

var IndividualTopic = React.createClass({
    getInitialState: function() {
        return { showTopicDescription: false };
    },
    onClick: function() {
        this.setState({ showTopicDescription: true });
        selected_topic_no = this.props.topic_no - 1;
        this.props.setTopicDescription({ showTopicDescription: true }); 
    },
    render: function () {
        return (
            <div>
                <div className="col-sm-2">
                    <div onClick={this.onClick} className="single-topic" data-topic-no={this.props.topic_no}>
                        {this.props.children}
                    </div>
                </div>
            </div>
        );
    }

});