反应：如何将结果从一个组件传递到另一组件

Question

I am trying to create a search component, which should have an input field and a result list. My problem is how to get the result data to the result component.

This is the input component:

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'
            />
        )
    }
}

And this should be my result list, which should be shown only if there is any result:

import React, { Component } from 'react'

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

Answer 1

You could create a parent component, containing both Search and SearchResult , that would hold some internal state.

That way when you get your results inside your handleChange method, you can invoke a prop callback to pass the data up to parent, hence calling inside the parent this.setState() with the data and then passing that data down to your SearchResults with props.

This technique is generally known as lifting the state up

An example of that container could be:

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>
    )
  }
}

Then, inside your Search component, replace console.log(result); with this.props.onDataFetched(result)