反应：如何从一个组件获得结果到另一个组件

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)