• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

如何渲染React中另一个组件的搜索结果?

JavaScript 来源:xploreraj 6次浏览

我是React的初学者,使用Webpack构建bundle.js并显示。如何渲染React中另一个组件的搜索结果?

我的需求是提供一些搜索表单,并在搜索表单下面显示结果。所以,为了模块化,我创建了一个包含搜索和结果视图组件的父组件。

现在我已经设计了一个窗体和书面窗体onSubmit事件处理程序,我应该如何继续在结果组件中呈现API结果(现在是虚拟json)。我附上我的意图简要照片供您参考。

enter image description here


===========解决方案如下:

这是基于我上面的评论我的解决方案:https://codesandbox.io/s/q85oq0w10q

创建HOC,将保留您的应用程序的状态,那么你的两个孩子仅仅用于渲染的目的,并且可以由纯函数

import React from 'react'; 
import { render } from 'react-dom'; 

const Result = ({results}) => { 
    return results.map(r => <div>{r}</div>); 
} 

const Search = (props) => { 
    const { 
    searchQuery, 
    onChange, 
    search 
    } = props; 

    return <div> 
    <input 
     type="text" 
     value={searchQuery} 
     onChange={onChange} 
    /> 
    <button onClick={search}>Search</button> 
    </div>; 
} 

class Container extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     searchQuery: '', 
     results: [] 
    } 

    this.onSearchQueryChange = this.onSearchQueryChange.bind(this); 
    this.onSearch = this.onSearch.bind(this); 
    } 

    onSearchQueryChange(e) { 
    this.setState({searchQuery: e.target.value}); 
    } 

    onSearch() { 
    // Simulate AJAX call 
    setTimeout(() => { 
     this.setState({results: [0, 1, 2, 3, 4]}); 
    }, 1000) 
    } 

    render() { 
    const {results, searchQuery} = this.state; 

    return <div> 
     <Search 
     searchQuery={searchQuery} 
     onChange={this.onSearchQueryChange} 
     search={this.onSearch} 
     /> 
     <Result results={results} /> 
    </div>; 
    } 
} 

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)