Reagieren: Wie man Ergebnisse von einer Komponente zu einer anderen Komponente erhält

Question

Ich versuche, eine Suchkomponente zu erstellen, die ein Eingabefeld und eine Ergebnisliste haben sollte. Mein Problem ist, wie man die Ergebnisdaten zur Ergebniskomponente erhält.

Dies ist die Eingabekomponente:

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

Und das sollte mein Ergebnisliste sein, die nur angezeigt werden sollen, wenn es irgendein Ergebnis:

import React, { Component } from 'react' 

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

Answer 1

Sie eine übergeordnete Komponente erstellen könnten, enthält sowohl Search und SearchResult, die einen internen Zustand halten würde.

Auf diese Weise, wenn Sie Ihre Ergebnisse in Ihrem handleChange Methode erhalten, können Sie eine Requisite Rückruf aufrufen bis zu Eltern, die Daten zu übergeben, damit innerhalb des übergeordneten this.setState() mit den Daten aufrufen und dann die Daten nach unten mit Requisiten, um Ihre SearchResults .

Diese Technik wird als lifting the state up

Ein Beispiel für diese Container könnte allgemein bekannt:

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

Dann in Ihrer Search-Komponente, ersetzen console.log(result); mit this.props.onDataFetched(result)