React.js 顯示帶有 onClick 事件的組件

Question

我是 React 的新手，我正在構建一個簡單的 React 應用程序，它在屏幕上顯示世界上所有的國家，還有一個顯示搜索國家數據的小搜索欄。

這是網站的圖片

但是我不知道如何在滾動條中顯示您要單擊的國家/地區。

這里的 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 事件，該事件將返回被點擊國家的名稱。 之后，我會在 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 of Images 中調用：

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

或者您也可以嘗試使用 react hooks（但這需要一些重構），因為您需要更改父組件的屬性。 有了它，您可以使用useState鈎子來更改父組件的值（從圖像到應用程序）：

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

然后將 setSearchField 作為道具傳遞給圖像，並在單擊圖像時更改 searchField 值：

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