如何让OnChange和OnKeyDown很好地协同工作？

Question

因此，我正在制作一个连接到 OpenWeather api 的天气应用程序，并希望我正在使用的搜索输入元素具有某些功能。我想在用户按下回车键后获取用户输入。因此，我使用 OnChange 事件来获取该值，并且还使用 OnKeyDown 事件来调用我的 searchLocation 函数，该函数更新当前链接以获取用户输入，该输入是 api 显示天气的位置。我想做的是从更新的链接获取用户输入。我不知道如何得到它。

持续发生的情况是我按 Enter 键但位置没有更新。我删除了某些逻辑，但当我这样做时，它会不断尝试调用 api。所以我觉得有必要在按下回车键时将布尔变量设置为 true，但这不太有效，所以我不知道如何让它工作。

我也知道有更好的方法来解决这个问题，但现在我只想保留 onChange 和 OnKeyDown 事件。

.tsx 最具逻辑性

  const searchParams = useSearchParams();
  const pathName = usePathname();
  const { replace } = useRouter();
  globalThis.keyPressed = false
  let location = '';


function setLocation(lct: string, evt: ChangeEvent<HTMLInputElement>){
    
    evt.preventDefault();
    
    if(globalThis.keyPressed){ 
      const selectedLocation = searchParams.get("location");
      
    replace(`?${new URLSearchParams({location: lct})}`)

     ApiHandler(location);
    }
}

function searchLocation(evt: React.KeyboardEvent<HTMLInputElement>){
   evt.preventDefault();


        
        globalThis.keyPressed = true;

        
        const params = new URLSearchParams(searchParams);

        if (location != ''){
            params.set('query', location);


        } else{
            params.delete('query');
        }
        replace(`${pathName}?${params.toString()}`);
      }

//the input element in question
   <input
       value={typeof location === 'string' ? location : ''}
       
       onChange={event => {setLocation(event.target.value, event)}}
               
      onKeyDown={ event => {event.key === 'Enter' ? searchLocation(event) : null} }
      
        placeholder="Enter Location"
        type="text"
        defaultValue={searchParams.get('query')?.toString()}
      /> 

.jsx 用于 API 处理

export default async function ApiHandler(location) {
  
  try{
       

    const data = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${location}&units=imperial&appid=${process.env.API_KEY}`
      );
  
    const res = await data.json();

    
    console.log(res.data);
    
      } catch (error){
          console.log("Error connecting to api");
          return new Response("Error in getting weather data", { status: 500 });
      }

}

.d.ts 用于全局变量

declare global {
    var keyPressed: boolean
}

Answer 1

使用原生的“input”元素，将其包装到“form”元素中。 仅使用“onChange”回调，如有必要，请使用去抖。 表单元素免费为您提供“onEnter”处理程序。

无论如何，有很多变体可以完成您的任务，这取决于您:)