React国家查询应用：如何实现点击侧边栏国家触发搜索展示对应数据

第一步：修改App.js #

首先在App类中新增侧边栏国家点击的处理方法：

// 加入到onClickChange方法下方即可
onCountryClick = (countryName) => {
  this.setState({
    searchField: countryName,
    button: true
  })
}

然后修复render函数中CountryList的props传值，原代码没有给clickFunc绑定处理方法，修改为：

<CountryList nations={nations} clickFunc={this.onCountryClick}/>

最后修复componentDidUpdate的错误写法，React禁止直接修改state值，调整为：

componentDidUpdate(prevProps, prevState) {
  if(prevState.button !== this.state.button && this.state.button) {
    this.setState({button: false})
  }
}

第二步：修改Images组件 #

原代码的onClick绑定逻辑错误，既重新赋值了props传入的clickChange，也没有回传当前点击的国家名，修改如下：

<div className='hover bg-navy pa2 ma1 tc w10' onClick={() => clickChange(name)}>

逻辑说明 #

修改完成后完全匹配你原本的实现思路：

• 点击侧边栏国家项时，会触发回调把当前国家名回传给App组件
• App组件将拿到的国家名赋值给searchField，同时设置button为true
• 自动触发原有的searchedNation筛选逻辑，页面展示对应国家的信息

内容的提问来源于stack exchange，提问作者Saverio Randazzo