021.gitHub搜索案例

实现效果：
输入内容点击搜索 调用接口获取数据 渲染在列表内

index.js

// 引入React核心库
import React from 'react'
// 引入ReactDOM
import ReactDOM from 'react-dom'
// 引入App组件
import App from './App'

// 渲染App到页面
ReactDOM.render(<App/>,document.getElementById('root'))

App.js

import React,{Component} from 'react'
import SearHeader from './components/searHeader'
import SearList from './components/searList'
import './App.css'
export default class App extends Component{
  // 状态在哪里，操作状态的方法就在哪里

  // 初始化状态
  state={
    list:[
    ],
    isFirst:true,
    isLoading:false,
    isError:false,
    err:''
  }
  
  updateStatus=(data)=>{
    console.log('data',data)
    this.setState(data)
  }

  render(){
    const { todos, list } = this.state
    console.log('apptodos',todos)
    return (
        <div className='searchBox'>
          <SearHeader updateStatus={this.updateStatus}/>
          <SearList  {...this.state}/>
        </div>
    )
  }
}

//css
.searchBox,.todoListBox{
    width: 520px;
    padding: 10px 0px 20px 10px;
    border: 2px solid #ddd;
    margin: auto;
    border-radius: 6px;
}
.searchBox{
    margin-top: 50px;
}

searchList:

import React, { Component } from 'react'
import  Item from '../item/index'
import './index.css'
import PropTypes from 'prop-types'
export default class SearList extends Component {
    // 对接受的props进行类型和必要的限制
    static propTypes = {
    }
    render() {
        console.log(this.props)
        const {list,isFirst,isLoading,isError,err} = this.props
        return (
            <ul className='listUl'>
                {
                    isFirst?<h2>欢迎使用，请输入关键字点击搜索</h2>:
                    isLoading?<h2>loading……</h2>:
                    isError?<h2>{err}</h2>:
                    Array.isArray(list)?list.map(item => {
                        return(
                            <li className="listLi" {...item} key={item.id}>{item.name}</li>
                        )
                    }):''
                }
            </ul>
        )
    }
}

//css
.listUl, .listLi{
    list-style: none;
}

.listUl{
    display: flex;
    justify-content: space-around;
}
.listLi{
    width: 100px;
    text-align: center;
}

searchHeader:

import React, { Component } from 'react'
import axios from 'axios'
import './index.css'
export default class SearHeader extends Component {
    // 键盘事件的回调
    search=(e)=>{
        console.log('this.element',this.element)
        // 连续解构再重命名 先解构this再解构element 给解构出来的value重命名为inputWord
        const {element:{value:inputWord}} = this
        console.log('inputWord',inputWord)
        this.props.updateStatus({isLoading:true,isFirst:false})
        axios.get(`http://localhost:5000/getUser?name=${inputWord}`).then(
            res=>{
                this.props.updateStatus({isLoading:false,list:res.data})
            },
            err=>{
                console.log(err)
            }
        )

    }
    render() {
        return (
            <div>
                <input ref={e=>this.element = e} className='todoheader' placeholder='请输入用户名'/>
                <button className='btn' onClick={this.search}>搜索</button>
            </div>
        )
    }
}

//css
.todoheader{
    width: 430px;
    height: 30px;
}
.btn{
    width: 60px;
    height: 30px;
    margin-left: 10px;
}