javascript - react : How to get results from one component to another component

Question

我正在尝试创建一个搜索组件，它应该有一个输入字段和一个结果列表。我的问题是如何将结果数据获取到结果组件。

这是输入组件:

import React, { Component } from 'react'
import { searchData } from '/imports/api/search/methods.js';

export default class Search extends Component {
    handleChange(event) {
        searchData.call(
            { value: event.target.value },
            (error, result) => {
                if (result && result.length > 0) {
                    console.log(result); // <-- Send this results to result component
                }
            }
        );
    }
    render() {
        return (
            <input type="text"
                onChange={this.handleChange}
                placeholder='Search'
            />
        )
    }
}

这应该是我的结果列表，只有在有任何结果时才应显示:

import React, { Component } from 'react'

export default class SearchResult extends Component {
    render() {
        return (
            <ul>
                <li>
                    // Show all result elements
                </li>
            </ul>
        )
    }
}

Answer 1

您可以创建一个父组件，其中包含 Search 和 SearchResult，它将保存一些内部状态。

这样，当您在 handleChange 方法中获取结果时，您可以调用 prop 回调将数据传递给父级，从而在父级内部调用 this.setState() 与数据，然后将该数据通过 props 传递到您的 SearchResults 。

该技术通常被称为 lifting the state up

该容器的一个示例可以是:

class SearchContainer extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: [],
    };
    this.handleResultChange = this.handleResultChange.bind(this);
  }

  handleResultChange(data) {
    this.setState({
      data,
    });
  }

  render() {
    return (
      <div>
        <Search onDataFetched={this.handleResultChange} />
        <SearchResult data={this.state.data} />
      </div>
    )
  }
}

然后，在搜索组件内，将 console.log(result); 替换为 this.props.onDataFetched(result)