27_练习2_用户搜索_交互

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import App from ‘./components/app‘;
import ‘./index.css‘;

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

import React,{Component} from ‘react‘

import Search from ‘./search‘
import Main from ‘./main‘

export default class App extends Component {
    state = {
        searchName: ‘‘
    }
    setSearchName = (searchName) => {
        //更新状态
        this.setState({searchName})
    }

    render() {
        return (
            <div className="container">
                <Search setSearchName={this.setSearchName}/>
                <Main searchName={this.state.searchName}/>
            </div>
        )
    }
}

import React,{Component} from ‘react‘
import PropTypes from ‘prop-types‘

export default class Search extends Component {
    static propTypes = {
        setSearchName: PropTypes.func.isRequired
    }
    search = () => {
        //得到输入的关键字
        const searchName = this.input.value.trim()
        // console.log(`searchName:${searchName}`)
        if (searchName) {

            //开始搜索
            this.props.setSearchName(searchName)
        }
    }

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

import React,{Component} from ‘react‘
import PropTypes from ‘prop-types‘
import axios from ‘axios‘

export default class Main extends Component {
    static propTypes = {
        searchName: PropTypes.string.isRequired
    }
    state = {
        initView: true,//搜索之前
        loading: false,//搜索中
        users: null,//搜索成功
        errorMsg: null//搜索失败
    }

    //当组件接收到新的属性时回调
    componentWillReceiveProps(newProps) {// 制定了新的searchName,需要请求
        const {searchName} = newProps
        //发请求之前需要更新状态(请求中)
        this.setState({
            initView: false,loading: true
        })
        //发送ajax请求，使用axios
        const url = `https://api.github.com/search/users?q=${searchName}`
        axios.get(url)
            .then(response => {
                //成功的返回，得到响应数据
                const result = response.data
                console.log(result)
                //更新状态(成功)
            }).catch(error => {
            //更新状态(失败)

        })

    }

    render() {
        const {initView,loading,users,errorMsg} = this.state
        const {searchName} = this.props
        console.log("render()",searchName)
        if (initView) {
            return <h2>请输入关键字进行搜索:{searchName}</h2>
        } else if (loading) {
            return <h2>正在请求中......</h2>
        } else if (errorMsg) {
            return <h2>{errorMsg}</h2>
        } else {
            return (
                <div className="row">
                    {                   //箭头两个作用 1.函数 2.返回
                        users.map((user,index) => (
                            <div className="card" key={index}>
                                <a href={user.url} target="_blank">
                                    <img src={user.avatarUrl}
                                         style={{width: 100}}/>
                                </a>
                                <p className="card-text">{user.name}</p>
                            </div>
                        ))
                    }

                </div>
            )
        }

    }
}