首页 > 网络编程 > JavaScript > javascript类库 > React > React搜索GitHub用户

基于React实现搜索GitHub用户功能

2024-02-27 08:40:32 作者：JudithHuang

在本篇博客中,我们将介绍如何在 React 应用中搜索 GitHub 用户并显示他们的信息,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下

创建 React 应用

首先，我们使用 Create React App 创建一个新的 React 应用。Create React App 是一个快速搭建 React 项目的工具，它提供了一个现代化的开发环境，让我们能够专注于编写代码而不必担心配置问题。

npx create-react-app github-user-search

安装 axios

我们将使用 axios 来发起 HTTP 请求。Axios 是一个简单易用的 JavaScript HTTP 客户端，用于在浏览器和 Node.js 环境中进行 HTTP 请求。

npm install axios

编写搜索组件

接下来，我们创建一个名为 Search 的组件，用于输入搜索关键字并触发搜索操作。这个组件包含一个输入框和一个搜索按钮，用户可以在输入框中输入关键字，然后点击按钮或按下回车键进行搜索。

// 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="输入关键字"
          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>
    )
  }
}

编写用户列表组件

接下来，我们创建一个名为 Users 的组件，用于显示搜索到的用户列表。这个组件接收一个用户列表作为 prop，并根据列表中的用户信息渲染用户卡片。

// 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>
    )
  }
}

编写用户组件

然后，我们创建一个名为 User 的组件，用于显示单个用户的信息。这个组件接收一个用户对象作为 prop，并根据用户信息渲染用户卡片。

// 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>
    )
  }
}

编写应用主组件

最后，在 App 组件中集成上述组件，并实现搜索功能。这个组件是我们应用的入口点，它负责管理整个应用的状态和逻辑。

// 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>
    )
  }
}

部署并使用

现在，你可以部署你的应用，并开始搜索 GitHub 用户了！

参考

到此这篇关于基于React实现搜索GitHub用户功能的文章就介绍到这了,更多相关React搜索GitHub用户内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！