快捷導(dǎo)航

基于React實(shí)現(xiàn)搜索GitHub用戶功能

更新時(shí)間：2024年02月27日 08:40:32 作者：JudithHuang

在本篇博客中,我們將介紹如何在 React 應(yīng)用中搜索 GitHub 用戶并顯示他們的信息,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

創(chuàng)建 React 應(yīng)用

首先，我們使用 Create React App 創(chuàng)建一個(gè)新的 React 應(yīng)用。Create React App 是一個(gè)快速搭建 React 項(xiàng)目的工具，它提供了一個(gè)現(xiàn)代化的開發(fā)環(huán)境，讓我們能夠?qū)Ｗ⒂诰帉懘a而不必?fù)?dān)心配置問(wèn)題。

npx create-react-app github-user-search

安裝 axios

我們將使用 axios 來(lái)發(fā)起 HTTP 請(qǐng)求。Axios 是一個(gè)簡(jiǎn)單易用的 JavaScript HTTP 客戶端，用于在瀏覽器和 Node.js 環(huán)境中進(jìn)行 HTTP 請(qǐng)求。

npm install axios

編寫搜索組件

接下來(lái)，我們創(chuàng)建一個(gè)名為 Search 的組件，用于輸入搜索關(guān)鍵字并觸發(fā)搜索操作。這個(gè)組件包含一個(gè)輸入框和一個(gè)搜索按鈕，用戶可以在輸入框中輸入關(guān)鍵字，然后點(diǎn)擊按鈕或按下回車鍵進(jìn)行搜索。

// Search.js

import React, { Component } from 'react';

export default class Search extends Component {
  state = {
    keyword: '',
  }

  onChange = (e) => {
    this.setState({ keyword: e.target.value });
  }

  onSearch = () => {
    const { keyword } = this.state;
    const { onSearch } = this.props;
    onSearch(keyword);
  }

  onKeyPress = (e) => {
    if (e.key === 'Enter') {
      this.onSearch();
    }
  }

  render() {
    return (
      <div className="input-group mb-3">
        <input
          type="text"
          className="form-control"
          placeholder="輸入關(guān)鍵字"
          onChange={this.onChange}
          onKeyPress={this.onKeyPress}
        />
        <div className="input-group-append">
          <button
            className="btn btn-outline-secondary"
            type="button"
            onClick={this.onSearch}
          >
            搜索
          </button>
        </div>
      </div>
    )
  }
}

編寫用戶列表組件

接下來(lái)，我們創(chuàng)建一個(gè)名為 Users 的組件，用于顯示搜索到的用戶列表。這個(gè)組件接收一個(gè)用戶列表作為 prop，并根據(jù)列表中的用戶信息渲染用戶卡片。

// Users.js

import React, { Component } from 'react';
import User from './User';

export default class Users extends Component {
  render() {
    const { users } = this.props;
    return (
      <div className="row row-cols-4 g-4">
        {users.map(user => <User key={user.node_id} user={user} />)}
      </div>
    )
  }
}

編寫用戶組件

然后，我們創(chuàng)建一個(gè)名為 User 的組件，用于顯示單個(gè)用戶的信息。這個(gè)組件接收一個(gè)用戶對(duì)象作為 prop，并根據(jù)用戶信息渲染用戶卡片。

// User.js

import React, { Component } from 'react';

export default class User extends Component {
  render() {
    const { user } = this.props;

    return (
      <div className="border p-3 d-flex flex-column align-items-center" style={{ width: '240px' }}>
        <img
          src={user.avatar_url}
          alt={user.node_id}
          className="rounded-circle"
          style={{ width: '50px', height: '50px' }}
        />
        <h4 className="text-primary">{user.login}</h4>
      </div>
    )
  }
}

編寫應(yīng)用主組件

最后，在 App 組件中集成上述組件，并實(shí)現(xiàn)搜索功能。這個(gè)組件是我們應(yīng)用的入口點(diǎn)，它負(fù)責(zé)管理整個(gè)應(yīng)用的狀態(tài)和邏輯。

// App.js

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

import Search from './Search';
import Users from './Users';

export default class App extends Component {
  state = {
    users: [],
  }

  onSearch = async (keyword) => {
    const res = await axios.get(`/api/github/search/users?q=${keyword || 'h'}`);
    if (res && res.data) {
      this.setState({ users: res.data.items || [] });
    }
  }

  render() {
    const { users }

 = this.state;

    return (
      <div className="container" style={{ margin: '20px auto' }}>
        <Search onSearch={this.onSearch} />
        <Users users={users} />
      </div>
    )
  }
}