使用 Next.js 和 styled-components 构建实时搜索-JavaScript中文网-JavaScript教程资源分享门户

在前端开发过程中，实时搜索是一项非常常见的需求。使用 Next.js 和 styled-components 可以快速构建一个实时搜索应用，而且还可以大大简化组件样式的管理。

准备工作

要开始创建我们的实时搜索应用，需要先满足以下前置条件：

了解 React 和 Next.js 的基本知识。
熟悉 styled-components 的基本使用方法。

如果您还不了解这些工具和框架，可以先去学习它们的基本概念和用法，再来尝试构建实时搜索应用。

创建应用

首先需要创建一个 Next.js 应用，可以使用以下命令：

npx create-next-app my-search-app

然后需要安装 styled-components 库和 HTTP 请求库 axios：

npm install styled-components axios

安装完成后，可以开始编写代码。

组件代码

我们需要创建两个 React 组件来实现实时搜索功能。

Input 组件

首先，我们创建一个 Input 组件用于显示输入框。

// www.javascriptcn.com code example
import styled from 'styled-components'

const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: palevioletred;
  background: papayawhip;
  border: none;
  border-radius: 3px;
  width: 50%;
`

export default Input

以上代码使用 styled-components 创建了一个 Input 组件，并定义了组件的基本样式。

Search 组件

然后，我们创建一个 Search 组件用于发送 HTTP 请求并渲染搜索结果。

// www.javascriptcn.com code example
import React, { useState } from 'react'
import axios from 'axios'
import Input from './Input'

const Search = () => {
  const [keyword, setKeyword] = useState('')
  const [data, setData] = useState([])

  const handleChange = async (e) => {
    const keyword = e.target.value
    setKeyword(keyword)

    if (keyword === '') {
      setData([])
      return
    }

    const result = await axios.get(`https://jsonplaceholder.typicode.com/posts?q=${keyword}`)
    setData(result.data)
  }

  return (
    <>
      <Input placeholder="Enter keywords to search..." value={keyword} onChange={handleChange} />

      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </>
  )
}

export default Search

以上代码使用了 React 的 Hooks，包括了 useState 和 useEffect。在 Search 组件中，我们通过 useState 创建了两个状态，一个表示输入框中的搜索关键字，一个表示搜索结果。当用户输入时，我们发送 HTTP 请求并更新结果。这里的请求地址是使用的 JSONPlaceholder 提供的模拟数据。

页面代码

在应用中使用 Search 组件，并渲染到页面中。

// www.javascriptcn.com code example
import React from 'react'
import Search from '../components/Search'

const IndexPage = () => {
  return (
    <>
      <h1>Welcome to my search app</h1>

      <Search />
    </>
  )
}

export default IndexPage

以上代码创建了一个页面，引入了 Search 组件并渲染到页面中。

结束语

以上就是使用 Next.js 和 styled-components 构建实时搜索应用的步骤和代码示例。使用这些工具和框架可以让前端代码更加易于维护和管理，提高开发效率。希望您能够尝试使用这些方法来构建自己的实时搜索应用，并在使用中不断完善和优化。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d80a4fa941bf7134e5df29

使用 Next.js 和 styled-components 构建实时搜索