根据下拉选择显示内容

Question

我有一个 object 列表说[{country:"US",name:"ABC"},{country:"China",name:"PQR"},{country:"AUS",name:"XYZ"}]

我想在下拉选择中显示列表的内容。 就像如果我 select 一个国家“美国”只有“ABC”应该来。

我做了下拉菜单，在 state 中，我将所选国家/地区保存为selectedCountry

如何根据selectedCountry显示名称。

Answer 1

export default function Test() {
    let data = [
                 { country: "US", name: "ABC" },
                 { country: "China", name: "PQR" },
                 { country: "AUS", name: "XYZ" },
 ];
     const [selectedCountry, setSelectedCountry] = useState("")
 return (
  <>
    <div>
      <select value={selectedCountry} onChange={(e)=>setSelectedCountry(e.target.value)}>
             {data.map((item)=>{
      return <option value={item.name}>{item.country}</option>  
      })}
    </select>
    <p>{selectedCountry}</p>
  </div>
</>
 );
}

Answer 2

const filtersArray= countryArray.filter(country=> country ===selectedCountry); 国家=过滤数组0；