网站开发实用技术第2版答案,网站建设 电子政务,搭建wordpress后干什么,太平保宝app免费下载二维码父组件#xff1a;App组件 子组件#xff1a;Search组件、List组件 案例需求#xff1a;文本框中输入关键词#xff0c;点击搜索按钮后#xff0c;下方列表展示出搜索结果 实现思路#xff1a;
子组件Search组件向父组件App传递状态#xff08;状态包括#xff1a;是否… 父组件App组件 子组件Search组件、List组件 案例需求文本框中输入关键词点击搜索按钮后下方列表展示出搜索结果 实现思路
子组件Search组件向父组件App传递状态状态包括是否为第一次打开页面isFirst、是否处于加载中isLoading、搜索出来的列表结果users、请求相关的错误信息err 解决方案想要实现子向父传递状态可以采取父向子传递一个方法然后子中通过this.props.updateAppState({状态名 “状态值”})的方式来实现子组件List拿到父组件App中的状态通过this.props.状态名 App组件
import React, {Component} from react
import Search from ./components/Search;
import List from ./components/List;
import ./App.css;
export default class App extends Component {state {// 初始化状态users: [], // users初始值为数组isFirst: true, // 是否为第一次打开页面isLoading: false, // 标识是否处于加载中err: // 存储请求相关的错误信息}// 更新App的stateupdateAppState (stateObj) {this.setState(stateObj)}render() {return (div classNamecontainerSearch updateAppState{this.updateAppState} /List {...this.state} //div)}
}/*function App() {return (divIndex //div);
}*/
Search组件
import React, {Component} from react;
import axios from axios;class Search extends Component {search () {// 获取用户的输入(连续解构赋值重命名)const {keyWordElement: {value: keyword}} this// 发送请求前通知App更新状态this.props.updateAppState({isFirst: false, isLoading: true})// console.log(keyword)// 发送网络请求axios.get(https://api.github.com/search/users?q${keyword}).then((response) {// console.log(成功了, response.data)// 请求成功后通知App更新状态this.props.updateAppState({isLoading: false, users: response.data.items})},(error) {// console.log(失败了, error)this.props.updateAppState({isLoading: false, err: error.message})})}render() {return (section classNamejumbotron style{{textAlign: center}}h3 classNamejumbotron-heading搜索github用户/h3divinput ref{c this.keyWordElement c} typetext placeholder输入关键词点击搜索/nbsp;button onClick{this.search}搜索/button/div/section);}
}export default Search;
List组件
import React, {Component} from react;
import ./index.cssclass List extends Component {render() {const {users, isFirst, isLoading, err} this.propsreturn (div classNamerow{isFirst ? h2欢迎使用输入关键字随后点击搜索/h2 :isLoading ? h2Loading.../h2 :err ? h2 style{{color: red}}{err}/h2 :users.map((userObj) {return (div classNamecard key{userObj.id}a href{userObj.html_url} relnoreferrer target_blankimg altavatar src{userObj.avatar_url} style{{width: 100px}}//ap classNamecard-text{userObj.login}/p/div)})}/div);}
}export default List;
