javascript - 如何在 React 中从子组件设置状态

Question

我想从子组件设置父组件的状态。我尝试使用 props 但它给出错误 Uncaught TypeError: this.props.setTopicClicked is not a function。有没有比使用 props 更有效的方法来设置父组件的状态？我想设置 isTopicClicked: true

的状态

主 Controller .jsx

import {React, ReactDOM} from '../../../build/react';

import SelectedTopicPage from '../selected-topic-page.jsx';
import TopicsList from '../topic-list.jsx';
import topicPageData from '../../content/json/topic-page-data.js';

export default class MainController extends React.Component {

  state = {
    isTopicClicked: false,
    topicPageData
  };

  onClick(topicID) {
    this.setState({
       isTopicClicked: true,
       topicsID: topicID
    });
  };

  setTopicClicked(event){
    this.setState({isTopicClicked: event});
  };

  render() {
    return (
      <div className="row">
        {this.state.isTopicClicked
          ? <SelectedTopicPage topicsID={this.state.topicsID} key={this.state.topicsID} topicPageData={topicPageData}/>
        : <TopicsList onClick={ this.onClick.bind(this) }/>}
      </div>
    );
  }
};

selected-topic-page.jsx

import {React, ReactDOM} from '../../build/react';

import SelectedTopicPageMarkup from './selected-topic-page-markup.jsx';
import NextPrevBtn from './next-prev-btn.jsx';

export default class SelectedTopicPage extends React.Component {
    state = {
        topicPageNo: 0,
        total_selected_topic_pages: 1
      };
    navigateBack(topicPageNo) {
        if (this.state.topicPageNo > 0){
            topicPageNo = this.state.topicPageNo - 1;
        }
        else {
            topicPageNo = 0;
        }
        this.setState({topicPageNo : topicPageNo});
    };
    navigateNext(totalPagesInSelectedTopic) {
        let topicPageNo;
        if (totalPagesInSelectedTopic > this.state.topicPageNo + 1){
            topicPageNo = this.state.topicPageNo + 1;
        }
        else if (totalPagesInSelectedTopic == this.state.topicPageNo + 1) {
          this.props.setTopicClicked(true);
        }
        else {
            topicPageNo = this.state.topicPageNo;
        }
        this.setState({topicPageNo : topicPageNo});
    };
    render() {
        let topicsID = this.props.topicsID;
        let topicPageNo = this.state.topicPageNo;
        return (
            <div>
                {this.props.topicPageData.filter(function(topicPage) {
                    // if condition is true, item is not filtered out
                    return topicPage.topic_no === topicsID;
                }).map(function (topicPage) {
                    let totalPagesInSelectedTopic = topicPage.topic_pages.length;
                    return (
                        <div>
                            <div>
                            <SelectedTopicPageMarkup headline={topicPage.topic_pages[0].headline} key={topicPage.topic_no}>
                                {topicPage.topic_pages[topicPageNo].description}
                            </SelectedTopicPageMarkup>
                            </div>
                            <div>
                                <NextPrevBtn moveNext={this.navigateNext.bind(this, totalPagesInSelectedTopic)} key={topicPage.topic_no} moveBack={this.navigateBack.bind(this, topicPageNo)}/>
                            </div>
                        </div>
                    );
                }.bind(this))}
            </div>
        );
    };
};

Answer 1

您似乎忘记将 setTopicClicked 传递给子项:

setTopicClicked={this.setTopicClicked.bind(this)}