用于使用 Next 和 React 从数据库获取数据的搜索栏

Question

好吧，首先，我已经发送了很多这个问题的变体，但大多数都使用一些较旧的技术，如 PhP、jQuery 等。 我是一名初级开发人员，所以我正在寻找一种使用 next、react、redux、axios 的技术堆栈来解决这个问题的方法。 想法如下： 我需要一个有两个按钮（图标）的搜索栏，一个用于搜索，另一个用于过滤。用户输入卡车或司机的姓名，并需要从数据库中获取与其输入相匹配的所有内容。因此，如果您输入“M”，它应该向您显示名称中包含 M 的所有司机，以及具有相同名称的所有卡车。 我对搜索查询的工作不多，所以说实话，我对这个话题很困惑。 看看下面我的组件，它会告诉你我的意思。

'use client'
import React, { ChangeEvent, useState } from 'react';
import SearchIcon from '@/public/icons/applicationIcons/SearchIcon';
import FilterIcon from '@/public/icons/applicationIcons/FilterIcon';
import { useSearchParams, usePathname, useRouter } from 'next/navigation';
import { useDebouncedCallback } from 'use-debounce';
import ArrowLeft from '@/public/icons/vectors/ArrowLeft';

export type SearchProps = {
  onSearch: (value: string) => void
}

const SearchBar = (props: SearchProps) => {
  const { onSearch } = props
  const [value, setValue] = useState('')
  const [isFocused, setIsFocused] = useState(false);
  const searchParams = useSearchParams()
  const pathname = usePathname()
  const { replace } = useRouter()
  console.log(value)

  const handleFocus = () => {
    setIsFocused(true);
  };
  const handleBlur = () => {
    setIsFocused(false)
  }

  const handleSearch = useDebouncedCallback((term: ChangeEvent<HTMLInputElement>) => {

    const { target } = term
    setValue(target.value)
    const params = new URLSearchParams(searchParams)
    if (term) {
      params.set('query', target.value);
    } else {
      params.delete('query');
    }
    replace(`${pathname}?${params.toString()}`);
  }, 300)

  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'Enter') {
      onSearch(value)
    }
  }

  return (
    <div
      className={`flex w-[412px] h-[56px] rounded-full group bg-white hover:bg-[#ededed] ${isFocused || value ? 'bg-[#ece6f0]' : ''
        }`}
    >
      <button onClick={handleBlur} className="p-2">
        {isFocused ? <ArrowLeft /> : <SearchIcon />}
      </button>
      <input
        name='search'
        type="search"
        className={`pl-2 focus:outline-none w-full group-hover:bg-[#ededed] placeholder:text-[#49454F] ${isFocused || value ? 'bg-[#ece6f0]' : ''
          }`}
        placeholder="Caută un vehicul, şofer, număr..."
        value={value}
        onFocus={handleFocus}
        onChange={handleSearch}
        onBlur={handleBlur}
        onKeyDown={handleKeyDown}
      />
      <button className="mr-2 ">
        <FilterIcon />
      </button>
    </div>
  );
};

export default SearchBar;

正如你所看到的，这是一团糟。请告诉我应该把注意力集中在哪里才能得到想要的结果。我在这里使用 use-debounce 库中的 debounce 函数，因此每次更改时我都不会得到参数的更改。 主要问题是，如何将其链接到我的后端，以便我可以检索数据？ 另外，我应该改变逻辑吗？将该组件作为父组件，并添加一个负责搜索逻辑的子组件，在这里它只会显示它？

我在造型方面也遇到了麻烦。我使用 group 为 div 和输入提供了所需的 bg 样式，但相同的方法没有产生任何焦点结果。所以我决定使用本地状态，它并不完全完整，因为我还没有承诺它，因为我相信我缺少一些关于如何做到这一点的非常简单的想法。

Answer 1

你找到解决办法了吗？我很想知道，坚持相同的功能.. 谢谢。