React.js 显示带有 onClick 事件的组件

Question

我是 React 的新手，我正在构建一个简单的 React 应用程序，它在屏幕上显示世界上所有的国家和一个显示搜索到的国家的数据的小搜索栏。

Here an image of the site

但是我不知道如何在滚动条中显示你想点击的国家

这里是app.js代码：

import React, { Component } from 'react';
import './App.css';
import NavBar from '../Components/NavBar';
import SideBar from './SideBar';
import CountryList from '../Components/SideBarComponents/CountryList';
import Scroll from '../Components/SideBarComponents/Scroll';
import Main from './Main';
import SearchCountry from '../Components/MainComponents/SearchCountry';
import SearchedCountry from '../Components/MainComponents/SearchedCountry';
import Datas from '../Components/MainComponents/Datas';

class App extends Component {

  constructor() {
    super();
    this.state = {
      nations: [],
      searchField: '',
      button: false
    }
  }

  onSearchChange = (event) => {
    this.setState({searchField: event.target.value});
    console.log(this.state.searchField)
  }

  onClickChange = () => {
    this.setState(prevsState => ({
      button: true
    }))
  }

  render() {

    const {nations, searchField, button, searchMemory} = this.state;

    const searchedNation = nations.filter(nation => {
      if(button) {
        return nation.name.toLowerCase().includes(searchField.toLowerCase())
      }
    });

    return (
      <div>
        <div>
          <NavBar/>
        </div>
          <Main>
            <div className='backgr-img'>
              <SearchCountry searchChange={this.onSearchChange} clickChange={this.onClickChange}/>
              <SearchedCountry nations={searchedNation}/>
            </div>
             <Datas nations={searchedNation}/>
          </Main>
          <SideBar>
            <Scroll className='scroll'>
              <CountryList nations={nations} clickFunc/>
            </Scroll>
          </SideBar>
      </div>
    );
  }

  componentDidMount() {
     fetch('https://restcountries.eu/rest/v2/all')
    .then(response => response.json())
    .then(x => this.setState({nations: x}));
  }

  componentDidUpdate() {
    this.state.button = false;
  }

}

export default App;

国家列表：

import React from 'react';
import Images from './Images';

const CountryList = ({nations, clickFunc}) => {
    return (
        <div className='container' style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(115px, 3fr))'}}>
            {
                nations.map((country, i) => {
                    return (
                        <Images 
                        key={country.numericCode}
                        name={country.name}
                        flag={country.flag}
                        clickChange={clickFunc}
                        />
                    );
                })
            }
        </div>
    )                   
}
export default CountryList;

和 images.js:

import React from 'react';
import './images.css'

const Images = ({name, capital, region, population, flag, numericCode, clickChange}) => {
    return (
        <div className='hover bg-navy pa2 ma1 tc w10' onClick={clickChange = () => name}>
            <img alt='flag' src={flag} />
            <div>
                <h6 className='ma0 white'>{name}</h6>
                {capital}
                {region}
                {population}
                {numericCode}
            </div>
        </div>
    );
}

export default Images;

我曾想过在单个国家/地区使用 onClick 事件，该事件将 return 被点击国家/地区的名称。之后，我会在 searchField 中输入名称并将按钮设置为 true，以便运行 searchedNation 函数。感谢任何提前给我答案的人。

Answer 1

为了保持实际结构，您可以尝试在图片中使用onClickChange：

onClickChange = (newName = null) => {
  if(newName) {
    this.setState(prevsState => ({
      searchField: newName
    }))
  }
  // old code continues
  this.setState(prevsState => ({
    button: true
  }))

}

然后在您调用的图像的 onClick 中：

onClick={() => {clickChange(name)}}

或者您也可以尝试使用 React Hooks（但这需要进行一些重构），因为您需要从父组件更改属性。有了它，您可以使用 useState 钩子来更改父组件的值（从图像到应用程序）：

const [searchField, setSearchField] = useState('');

然后将 setSearchField 作为 props 传递给图像，并在单击图像时更改 searchField 值：

onClick={() => {
    clickChange()
    setSearchField(name)
}}

React.js 显示带有 onClick 事件的组件

React.js Display a component with onClick event

html

javascript

css

error-handling

reactjs