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回调来将数据传递给parent，因此在父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>
    )
  }
}

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

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

1 个答案: