使用 React 选择内的选项值

Question

我是 React 的菜鸟，我想填写 <select>

我遇到的问题是当我想点击我的一项时...下拉仅在我将我的项目进行编码时显示不同的选项。这是我的代码

父组件

import React, { Fragment, useState, useEffect } from "react";
import Country from "./Country";
const CountriesList = ({ handleOnChange }) => {
  const [countriesLoaded, setCountriesLoaded] = useState(false);
  const [countriesList, setCountriesList] = useState([]);

  const getCountries = async () => {
    const api = "https://restcountries.eu/rest/v2/all";
    const response = await fetch(api);
    const countrieslst = await response.json();
    setCountriesList(countrieslst);
    setCountriesLoaded(true);
  };

  useEffect(() => {
    getCountries();
  }, [countriesList]);

  return (
    <Fragment>
      <select id="country" name="country" onChange={handleOnChange}>
        <option value="">-- Select a country --</option>

        {countriesLoaded
          ? countriesList.map((country) => (
              <Country key={country.alpha2Code} countryItem={country} />
            ))
          : null}
      </select>
    </Fragment>
  );
};

export default CountriesList;

子组件

import React from "react";
const Country = ({ country }) => {
  return <option value={country.alpha2Code}>{country.name}</option>;
};
export default Country;

如果我检查 DOM 没问题，但只显示我的第一个选项

Thnx 4 支持，祝你有美好的一天！

Answer 1

[编辑] 只需在您的代码中添加 style={{display: 'block'}}>。您将能够查看选择框渲染数据

这是我对您的代码也做了一些更改的链接，但这是可选的：

https://codesandbox.io/s/nd58i?file=/src/components/Form.jsx