github搜索案例（react版本）之展示数据

代码变更涉及的文件有：

1. App.js，即App组件。
2. components/Search/index.jsx，即Search组件。
3. components/List/index.jsx，即List组件。

App.js（App组件）

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

export default class App extends Component {

  state = {
    users:[]
  }

  saveUsers = (users) => {
    this.setState({users});
  }

  render() {
    const {saveUsers} = this;
    const {users} = this.state;
    return (
      <div className="container">
        <Search saveUsers={saveUsers}/>
        <List users={users}/>
      </div>
    )
  }
}

Search/index.jsx（Search组件）

import React, { Component } from 'react';
import axios from "axios";

export default class index extends Component {
    
    handleClick = () => {
        //连续解构赋值并重命名
        const {keywordEle:{value:keyword}} = this;

        axios.get(`https://api.github.com/search/users?q=${keyword}`).then(
            response => {
                console.log("请求成功了",response.data);
                this.props.saveUsers(response.data.items);
            },
            error => {
                console.log("请求失败了",error.message);
            }
        )
    }

    render() {
        const {handleClick} = this;
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">搜索Github用户</h3>
                <div>
                    <input ref={c => this.keywordEle = c} type="text" placeholder="输入关键词"/>&nbsp;
                    <button onClick={handleClick}>搜索</button>
                </div>
            </section>
        )
    }
}

List/index.jsx（List组件）

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

export default class index extends Component {
    render() {
        const { users } = this.props;
        return (
            <div className="row">
                {
                    users.map(userObj => {
                        return (
                            <div className="card" key={userObj.id}>
                                <a href={userObj.html_url} target="_blank" rel="noreferrer">
                                    <img alt="avatar" src={userObj.avatar_url} style={{ width: '100px' }} />
                                </a>
                                <p className="card-text">{userObj.login}</p>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}

相关链接

github搜索案例（react版本）之搭建静态页面