在React.js的搜索栏中输入选中的项

Question

我有以下代码:

function App() {
const [countries,setCountries]= useState([]);
const [search, setSearch] = useState('');

//Take data from API with useEffect, async/await and try/catch
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('https://restcountries.com/v2/all');
setCountries(response.data);
} catch (error) {
console.error(error);
}
}
fetchData();
}, []);
const filteredCountries = countries.filter((country) => 
country.name.toLowerCase().includes(search.toLowerCase())
);



const handleSelect = (country) => { 
setSearch(country.name);
}


return (
<>
<div>
<SearchBar onChange={(e)=> setSearch(e.target.value)}  />
{
<ul className="list">
{search.length > 0 && filteredCountries.map((country) => (
<li key={country.name} onClick={() => handleSelect(country)}>
{country.name}
</li>
))}
</ul>
} 
</div>
<div className="map-container">
</div>

</>  
)
}
export default App;

结果如下:图像列表

我如何从列表中选择一个项目，例如，如果我搜索意大利，意大利出现，我想选择它，并让它出现在搜索栏。

我想创建一个搜索栏来找到一个国家，并选择它，它应该出现在被选中后的搜索栏。

CodeSandBox链接:https://codesandbox.io/p/github/pierre1590/Population-Tracker/draft/gallant-gagarin?file=%2Fsrc%2Fcomponents%2FMap%2FMap.js

Answer 1

在<SearchBar/>组件中添加value={search}

eg:<SearchBar value={search} onChange={(e)=> setSearch(e.target.value)} />

下面是完整的代码(我使用了一个普通的输入标签来代替你的SearchBar组件)

import { useState, useEffect } from "react";
import axios from 'axios';

function App() {
const [countries,setCountries]= useState([]);
const [search, setSearch] = useState('');

console.log(search)
//Take data from API with useEffect, async/await and try/catch
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('https://restcountries.com/v2/all');
setCountries(response.data);
} catch (error) {
console.error(error);
}
}
fetchData();
}, []);
const filteredCountries = countries.filter((country) => 
country.name.toLowerCase().includes(search.toLowerCase())
);



const handleSelect = (country) => { 
setSearch(country.name);
}


return (
<>
<div>
<input value={search} onChange={(e)=> setSearch(e.target.value)}  />
{
<ul className="list">
{search.length > 0 && filteredCountries.map((country) => (
<li key={country.name} onClick={() => handleSelect(country)}>
{country.name}
</li>
))}
</ul>
} 
</div>
<div className="map-container">
</div>

</>  
)
}
export default App;

CodeSandBox Link - https://codesandbox.io/s/enter-the-selected-item-in-the-search-bar-in-react-js-582rez?file=/src/App.js