javascript - ReactJs - 我怎样才能从显示嵌套的子组件返回到只显示第一个父组件

Question

SubmitForm -parent-> Results -parent-> Presentation -parent-> ButtonBackToSearch

我正在尝试学习如何在 ReactJs 中正确思考并创建单页应用。

我正在用 React 构建维基百科查看器。在我的 < SubmitForm/> 组件中，我的用户输入数据，然后在 < Results/> 组件中准备数据。接下来在 组件中呈现。当 组件处于事件状态时，我将隐藏在带有搜索窗口的 css 中。

组件是最后一个组件 的父组件。该组件有一个按钮，代码如下:

import React from 'react';

export default class ButtonBackToSearch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isBackToggleOn: false};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({isBackToggleOn: true});
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          BACK
        </button>
      </div>
    );
  }
}

现在我有一个严肃的谜语。当用户单击 BACK 按钮并且 isBackToggleOn 为真时，我如何才能“销毁”所有这些已加载的组件:Results、Presentation、ButtonBackToSearch 并返回 以准备下一次搜索？

我当然可以重新加载页面，但是重新加载所有页面 (F5) 就像作弊，对吧？

在 React 中这样做的正确方法是什么？

这是我的 SubmitForm 代码:​​

import React from 'react';
import axios from 'axios';

import Title from './Title';
import Results from './Results';

export default class SubmitForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      value: '',
      display: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  axiosStart() {
    const wikiApiUrl = 'https://en.wikipedia.org/w/api.php?action=opensearch&format=json&origin=*&search=';
    const wikiApiUrlWithQuery = wikiApiUrl + this.state.value;
    axios.get(wikiApiUrlWithQuery) 
      .then(response => {
        console.log('@axiosStart was launched by user!');
        this.setState(Object.assign({}, this.state, { data: response.data }))
      }) 
      .catch(err => {
        console.log('Error: => ' + err);
        this.setState(Object.assign({}, this.state, { data: 'error' }))
      });
    this.setState({display: 'displayNone'});
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    console.log(('An input was submitted: ' + this.state.value));
    // handle change has just updated state
    // now app can start axios with entered query
    // as soon as user submits
    this.axiosStart();
    event.preventDefault();
  }

  render() {
    return (
      <div className="container">
        <div className={this.state.display}>
        <form onSubmit={this.handleSubmit}>
          <label>
            <Title />
            <input className="wiki_query" type="text" value={this.state.value} onChange={this.handleChange} autoFocus />
          </label>
          <button className="btn btn-default" type="submit" value="Submit">Search</button>
        </form>
        </div>
        <Results dataReady={this.state.data} />
      </div>
    );
  }
}

Answer 1

我会有三个组成部分
主屏幕
形式
结果


MainScreen 将管理向用户显示的屏幕:结果、表单或默认。

BackButton 将在单击时接受回调调用。处理程序将是 MainScreen 本身，并将更改要显示的屏幕的状态。