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;
}
複製代碼