基于react搜索小案例

基于react搜索小案例

App.js

import React, { Component } from 'react'
import Header from './components/Header';
import List from './components/List'

export default class App extends Component {
  state = {
    dataList:[],//存储数据
    isFirst:true,//判断是否是第一次显示
    isLoading:false,//是否是在加载中
    err:''
  }
  updateState = (obj)=>{
    this.setState(obj)
  }
  render() {
    return (
      <div>
        {/* 给子组件传递方法*/}
       <Header updateState = {this.updateState}/>
       {/* 将数据全部传递过去 */}
       <List {...this.state}/>
      </div>
    )
  }
}

Header.js

import React, { Component } from 'react'
import './index.css';
import axios from 'axios'

export default class Header extends Component {
    // 思路：点击搜索按钮的时候，将输入框中的数据拿到，之后向后端发送请求，将请求回来的数据通过调用事件的方式传递给父组件
    handelKeyWord = ()=>{
        // console.log(this.input);通过打印发现，此为需要的节点，将节点中的值取出来，在这里所用的写法是一个新的知识点
        const {input:{value}} = this;
        // 在发送网络请求之前，将第一次和正在加载中重新设置
        this.props.updateState({isFirst:false,isLoaing:true})
        axios.get(`https://api.github.com/search/users?q=${value}`).then(
             res=>{console.log(res.data.items);
                //将返回回来的数据，传递给父组件
                this.props.updateState({dataList:res.data.items,isLoaing:false})
            },
            error=>{console.log(error)})
    }
    render() {
        return (
            <div className='header'>
                <input type="text"   className='search' ref={node => {this.input = node}}/>
                <button onClick={this.handelKeyWord}>点我进行搜索</button>
            </div>
        )
    }
}

List.js

import React, { Component } from 'react'
import './index.css'
export default class List extends Component {
    render() {
        console.log(this.props);
        const {isFirst,isLoading,dataList,err} = this.props;
        return (
            <div>
                 {
                isFirst ? <h2>欢迎来到这里，请你输入后进行搜索</h2>:
                isLoading ? <h2>稍等片刻。数据正在加载中。。。</h2> :
                err ? <h2>请求搜索不到</h2>:<ul className='list'>
                 {
                    dataList.map(item =>{
                        return ( <li className='item' key={item.id}>
                            <a href={item.html_url}>
                                <img src={item.avatar_url}  alt="" />
                            </a>
                            <h5>{item.login}</h5>
                        </li>)
                    })
                }
                </ul>
            }
            </div>
           
        )
    }
}