React：あるコンポーネントから別のコンポーネントへの結果の取得方法

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メソッド内の検索結果を取得するとき

そのように、あなたはので、データを親this.setState()内部で呼び出し、そのデータの小道具を使用して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> 
    ) 
    } 
} 

次に、あなたの検索コンポーネントの内部で、this.props.onDataFetched(result)