Question

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

public static List<MasterReject> GetDatas()
{
    var context = new FingerScanContext();

    return context.MasterRejects.OrderBy(m=>Regex.Split(m.Replace("
    ", ""), "([0-9]+)")
   ).ToList();
}

Answer 1

从IndividualTopic的click处理程序使用我们在父组件的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>
        );
    }

});

Answer 2

这是基于我的评论的评论版。

我添加了一堆评论，随时可以提出更多问题，我试图了解的主要观点是IndividualTopic组件应该是愚蠢的，内部的逻辑非常少，只需要传递道具和电话回拨。

这是完全未经测试的伪代码，请不要指望它按原样运行 - 我只是想说明一种方法。

var TopicsList = React.createClass({

    // setup our generic callback method to handle all topic selection
    // this gets passed the event object and topic ID and sets the state
    topicSelectionCallback: function(topicID, event) {
        this.setState({
            showTopicDescriptions: true,
            selectedTopicID: topicID
        });
    },

    // maybe you need to close the topic as well...
    closeTopicCallback() {
        this.setState({
            showTopicDescription: false
        });
    }

    render: function () {
        return (
            <div className="row">
                // I've neatened up your syntax for the IndividualTopic elements
                // props should be camel case and one their own line, I pass
                // through the callback as well as the label
                <IndividualTopic 
                    topicID="1" 
                    selectionCallback={this.topicSelectionCallback} 
                    label="Topic"
                >
                <IndividualTopic 
                    topicID="2" 
                    selectionCallback={this.topicSelectionCallback} 
                    label="Topic"
                >
                <IndividualTopic 
                    topicID="3" 
                    selectionCallback={this.topicSelectionCallback} 
                    label="Topic"
                >
                <IndividualTopic 
                    topicID="4" 
                    selectionCallback={this.topicSelectionCallback} 
                    label="Topic"
                >
                <div className="col-sm-12">
                    { this.state.showTopicDescription ? 
                        // pass the selected topic ID assuming this component will
                        // then re-render based on the ID that it's passed
                        <IndividualTopicPages 
                            selectedTopic={this.state.selectedTopicID}
                            closeTopicCallback={this.closeTopicCallback} // closing the topic
                        /> 
                    : null }
                </div>
            </div>
        );
    }
});

// this doesn't really need to be a var in this scope
// var selected_topic_no;

var IndividualTopic = React.createClass({
    onClick: function(event) {
        // assuming you're using ES6, declare this as a let as it's only
        // ever used here, if not just a local var will work fine
        let selectedTopicID = this.props.topicID - 1;
        // call the callback that's passes as a prop, send the topic ID
        // as a parameter
        this.props.topicSelectionCallback(event, selectedTopicID);
    },

    render: function () {
        return (
            <div>
                <div className="col-sm-2">
                    <div onClick={this.onClick} className="single-topic" data-topic-id={this.props.topicID}>
                        {this.props.label} {this.props.topicID} // render out the label and topicID here
                    </div>
                </div>
            </div>
        );
    }
});

如何在React中设置父组件的State

2 个答案: