时间戳

首页 > 解决方案 > 如何让我的按钮在显示国家/地区后正确显示一个国家/地区的完整描述

javascript - 如何让我的按钮在显示国家/地区后正确显示一个国家/地区的完整描述

问题描述

我已经为国家创建了一个搜索栏，我希望在国家名称旁边有一个按钮，它将显示我的一个组件，该组件负责显示有关该国家/地区的更多详细信息。目前，只有一个结果时显示更多细节，点击按钮后如何显示？

const App = () => {
const [countries, setCountries] = useState([]);
const [searchName, setSearchName] = useState("");

 useEffect(() => {
  axios
    .get(`https://restcountries.eu/rest/v2/name/${searchName}`)
   .then(response => {
     console.log(`>> Response: ${JSON.stringify(response)}`);

     setCountries(response.data);
   });
 }, [searchName]);

 const handleSearch = event => {
  setSearchName(event.target.value);
  };
  const Country = ({ capital, name }) => {
  return (
   <div>
     <p>
       {name}{" "}
       <button props={countries} onClick={showCountry}>
         show
       </button>
     </p>
     </div>
   );
   };
  const showCountry = props => {
  return (
   <SingleCountry
     name={props.name}
     capital={props.capital}
     population={props.population}
     languages={props.languages}
     flag={props.flag}
    />
  );
 };
const SingleCountry = ({ name, capital, population, languages, flag }) => 
{
  return (
   <div>
     <h3>{name}</h3>
     <p>capital {capital}</p>
     <p>population {population}</p>
     <h2>languages</h2>
     <ul>
       {languages.map(el => (
         <li>{el.name}</li>
       ))}
     </ul>
     <img src={flag} alt="OOPS" class="flag-image" />
   </div>
  );
 };
 const Countries = () => {
  if (countries.length === 0) {
   return <span class="results__label"> Search something </span>;
   }
  if (countries.length === 1) {
  return countries.map(c => (
    <SingleCountry
      name={c.name}
      capital={c.capital}
      population={c.population}
      languages={c.languages}
      flag={c.flag}
    />
  ));
  }

 return (
  <div>
    <span class="results__label"> Search Results: </span>
    <div>
      {countries.map(c => (
        <Country name={c.name} />
      ))}
    </div>
  </div>
  );
 };

return (
 <div>
   <div style={{ margin: "8px" }}>
     find countries <input onChange={handleSearch} />
   </div>
    <Countries />
   <div />
 </div>
 );
};

导出默认应用程序；

https://codesandbox.io/s/cocky-butterfly-uf0dw这是我的代码的沙箱

标签： javascriptjsonreactjs

解决方案

有一个useState()用来隐藏/显示国家信息的标志。

const Country = ({ capital, name, population, languages, flag }) => {
  const [show, setShow] = useState(false);

  return (
    <div>
      <p>
        {name}{" "}
        <button props={countries} onClick={() => setShow(!show)}>
          { show ? 'hide' : 'show' }
        </button>
        {show && // use show flag to conditionally render country info
          <SingleCountry
            name={name}
            capital={capital}
            population={population}
            languages={languages}
            flag={flag}
          />
        }
        </p>
      </div>
    );
  };

最后，在填充国家/地区时传递所有信息。

{countries.map(c => (
  <Country name={c.name}
    capital={c.capital}
    population={c.population}
    languages={c.languages}
    flag={c.flag}
   />
))}

见沙盒

推荐阅读