React.js实现选中搜索结果项填充至搜索框的技术咨询

你的代码里handleSelect函数已经正确触发了setSearch更新搜索关键词状态，但问题在于SearchBar组件不是受控组件——你只传递了onChange事件，却没把search状态绑定到它的value属性上，导致输入框无法同步状态变化。

只需做以下修改：

1. 让SearchBar成为受控组件 #

调用SearchBar时添加value属性，绑定search状态：

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

2. 确认逻辑完整性 #

你的handleSelect函数已经正确实现了点击列表项更新search状态的逻辑，无需修改：

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

修改后的完整代码：

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

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

  // 从API获取数据
  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>
        {/* 关键修改：添加value属性绑定search状态 */}
        <SearchBar 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;

修改完成后，点击过滤后的列表项时，选中的国家名称会自动填充到搜索框中——输入框的value与search状态保持同步，状态更新时输入框内容会随之变化。

内容的提问来源于stack exchange，提问作者Piero Sabino