react 搜索数据案例

app.js

import React, { Component } from 'react'

import ReactDOM, { render } from 'react-dom';

import logo from './logo.svg';

import './App.css';

 

import Search from './search'

import List from './list'

import axios from 'axios';

 

export default class App extends Component {

  state = {

    users: [],

    firstPag:true,

    isLoading:true,

    err:''

  }

  getData = (update) => {

    this.setState(update)

   

  }

  render() {

    

    return (

   

    <div className="App">

      <Search getData={this.getData} />

      <List {...this.state} />

    </div>

  );

  }

 

}

search -> index.jsx

import React, { Component } from 'react'

import ReactDOM from 'react-dom';

import axios from 'axios';

 

export default class Search extends Component{

    updatelist=()=>{

        // console.log(this.keyword.value);

        const {value}=this.keyword;

        this.props.getData({firstPag:false,isLoading:true})

        axios.get('https://api.github.com/search/users?q='+value).then(

            response =>{

                console.log(response.data.items);

                this.props.getData({firstPag:false,isLoading:false,users:response.data.items})

           

            //   const users=response.data.items;

            //   this.setState({users})

            },

            error=>{

                this.props.getData({firstPag:false,isLoading:false,err:error.message})

            }

          )

       

    }

 

    render (){

        return (

            <div>

                <input type='text' ref={c=>{this.keyword=c}}  />

                <button onClick={this.updatelist}>搜索</button>

            </div>

        )

    }

}

List -> index.jsx

import React, { Component } from 'react'

import ReactDOM from 'react-dom';

 

export default class List extends Component {

    render() {

        const { users,firstPag,isLoading,err } = this.props

        return (

 

            <div>

                {

                    firstPag ? <h2>欢迎搜索</h2> :

                    isLoading ? <h2>isLoading ...</h2> :

                    err ? <h2>{err}</h2> :

                    users.map((userObj,index) => {

                        return <div key={userObj.id} style={{ float: 'left',marginRight:'15px',marginTop:'50px' }}>

                            <img src={userObj.avatar_url} style={{display:'inline-block',width:'30px',height:'30px'}} />

                            <p>{userObj.login}</p>

                        </div>

                    })

                }

 

            </div>

        )

    }

}