React复杂案例之SearchPub

1.index

import React from 'react'
import ReactDOM from 'react-dom'

import App from './components/app'

import './index.css'

/*

    1.划分组件
    2.静态组件
    3.交互组件

 */

ReactDOM.render(<App/>,document.getElementById('root'));

2.app

import React,{Component} from 'react'
import Search from './search'
import Main from './main'

export default class App extends Component{

    /*

        搜索：需要在App中设置一个状态用来进行父子组件信息传递
            搜索组件将搜索结果告知父组件，父组件将信息告诉列表组件去更新发请求

     */

    render(){

        return(
            <div className="container">
                <Search/>
                <Main/>
            </div>
        )
    }
}

3.search

import React,{Component} from 'react'
import PubSub from 'pubsub-js'

export default class Search extends Component{


    search = ()=>{
        //得到输入的数据
        const searchName = this.input.value.trim();
        //搜索
        if(searchName){
            //发布消息
            console.log("发布消息：",searchName);
            PubSub.publish('search',searchName);
        }
    };

    render(){
        return(
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3>
                <div>
                    <input ref={inst=>this.input=inst} type="text" placeholder="enter the name you search"/>
                    <button onClick={this.search}>Search</button>
                </div>
            </section>
        )
    }
}

4.main

import React,{Component} from 'react'
import Axios from 'axios'
import PubSub from 'pubsub-js'

export default class Main extends Component{

    state = {
        initView:true,
        loading:false,
        users:null,
        errorMsg:null,
        searchName:'',
    };

    //接收到searchName进行请求数据
    handleSearch=(searchName)=>{
        this.setState({
            initView:false,
            loading:true,
        });
        const url = `https://api.github.com/search/users?q=${searchName}`;
        Axios.get(url).then(response=>{
            //得到数据
            const result = response.data;
            console.log("result--->",result);
            //处理数据
            const items = result.items.map(item=>{
                return {
                    name:item.login,
                    url:item.html_url,
                    face:item.avatar_url
                }
            });
            console.log("users--->",items);
            //更新状态为成功
            this.setState({
                loading:false,
                users:items
            })
        }).catch(err=>{
            console.log("err--->",err);
            this.setState({
                loading:false,
                errorMsg:err.message
            })
        })
    };

    componentDidMount(){
        //订阅消息
        console.log("订阅消息");
        PubSub.subscribe('search',(msg,searchName)=>{
            console.log(`接受到消息：${msg}`,searchName);
            this.setState({searchName});
            this.handleSearch(searchName);
        });
    }

    render(){

        const style = {
            width: 100
        };

        const {initView,loading,users,errorMsg,searchName} = this.state;

        if(initView){
            return <h2>请输入关键字搜索:{searchName}</h2>
        }else if(loading){
            return <h2>正在请求中...</h2>
        }else if(errorMsg){
            return <h2>{errorMsg}</h2>
        }else {

            return (
                <div className="row">
                    {
                        users.map((user,index)=>(
                            <div className="card" key={index}>
                                <a href={user.url} target="_blank">
                                    <img src={user.face} style={style}/>
                                </a>
                                <p className="card-text">{user.name}</p>
                            </div>
                        ))
                    }
                </div>
            )
        }
    }
}