react+axios實現github搜尋使用者功能(示例程式碼)
阿新 • • 發佈:2021-09-18
載入
請求成功
請求失敗
在檔案路徑點選cmd 回車
首先把伺服器開啟 npm start
app.
import React,{ Component } from 'react' import "./App." import Header from './conompents/Header' import List from './conompents/List' export default class App extends Component { // 初始化state state={ users:[],isloading:false,isfirst:true,err:'' } update=(updatemessage)=>{ this.setState( updatemessage ) } render() { return ( <div className="container"> <Header update={this.update} /> <List users={this.state}></List> </div> ) } }
Header.jsx
import React,{ Component } from 'react' import axios from"axios" export default class Header extends Component { search=()=>{ consolehttp://www.cppcns.com.log(this.searchbtn.value); this.props.update({isfirst:false,isloading:true}) axios.get(`http://localhost:3000/api1/search/users?q=${this.searchbtn.value}`).then( // 成功時回撥 response=>{ console.log("傳送請求成功",response.data.items); this.props.update({users: response.data.items,isloading:false}) },// 失敗時回撥 error=>{ this.props.update({err:error.message,isloading:false}) console.log("失敗了",error.message); } ) } render() { return ( <section className="jumbotron"> <h3 className="jumbotron-heading">Search Users</h3> www.cppcns.com<div> <input type="text" placeholder="enter the name you search" ref={c=>this.searchbtn=c} /> <button onClick={this.search}>Search</button> </div> </section> ) } }
List.jsx
import React,{ Component } from 'react' import Listitem from './ListztqIFem' export default class List extends Component { render() { return ( <div className="row"> { this.props.users.isfirst ? <h2 sztqIFtyle={{margin:"50px"}}>www.cppcns.comWelcome to use,please enter the keyword</h2> : this.props.users.isloading ? <h2 style={{margin:"50px"}}>Loading......</h2> : this.props.users.err ? <h2 style={{margin:"50px"}}>{this.props.users.err}</h2> : this.props.users.users.map((a) => { return ( <Listitem key={a.id} users={a} /> ) }) } </div> ) } }
Listitem
import React,{ Component } from 'react' import "./index.css" export default class Listitem extends Component { render() { return ( <div className="card" > <a href={this.props.users.html_url} target="_blank" > <img src={this.props.users.avatar_url} style={{ width: '100px' }} /> </a> <p className="card-text">{this.props.users.login}</p> </div> ) } }
到此這篇關於react+axios實現搜尋github使用者功能的文章就介紹到這了,更多相關react axios github搜尋內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!