javascript - 如何在 React 的另一个组件中呈现搜索结果？

Question

我是 React 的初学者，使用 Webpack 构建 bundle.js 并显示。

我的需求是提供一些搜索表单，并相应地在搜索表单下方显示结果。因此，为了对其进行模块化，我创建了一个包含搜索和结果 View 组件的父组件。

现在我已经设计了一个表单并编写了表单 onSubmit 事件处理程序，我应该如何继续在结果组件中呈现 API 结果(现在是虚拟 json)。我附上一张我的意图的简短照片供您引用。

Answer 1

这是基于我上面的评论的解决方案:https://codesandbox.io/s/q85oq0w10q

创建一个 HOC这将保存您的应用程序的状态，然后您的两个 child 仅用于渲染目的并且可以成为纯函数

import React from 'react';
import { render } from 'react-dom';

const Result = ({results}) => {
  return results.map((r, i) => <div key={i}>{r}</div>);
}

const Search = (props) => {
  const {
    searchQuery,
    onChange,
    search
  } = props;

  return <div>
    <input
      type="text"
      value={searchQuery}
      onChange={onChange}
    />
    <button onClick={search}>Search</button>
  </div>;
}

class Container extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      searchQuery: '',
      results: []
    }

    this.onSearchQueryChange = this.onSearchQueryChange.bind(this);
    this.onSearch = this.onSearch.bind(this);
  }

  onSearchQueryChange(e) {
    this.setState({searchQuery: e.target.value});
  }

  onSearch() {
    // Simulate AJAX call
    setTimeout(() => {
      this.setState({results: [0, 1, 2, 3, 4]});
    }, 1000)
  }

  render() {
    const {results, searchQuery} = this.state;

    return <div>
      <Search
        searchQuery={searchQuery}
        onChange={this.onSearchQueryChange}
        search={this.onSearch}
      />
      <Result results={results} />
    </div>;
  }
}