如何在 React Django 中制作搜索栏 - Javascript

开发一个搜索栏是在 Web 应用中非常常见的需求。在 React 和 Django 中，我们可以相对容易地制作搜索功能。本文将介绍如何利用 React 和 Django 制作一个基本的搜索栏。

React

我们在 React 中需要创建一个表单，并使用 React hooks 来获取用户的输入。使用 useState hook 来创建一个 input state 来存储用户输入的关键字：

import React, { useState } from 'react';

function SearchBar({ onSearch }) {
  const [input, setInput] = useState('');

  const handleSubmit = e => {
    e.preventDefault();
    onSearch(input);
    setInput('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={input}
        onChange={e => setInput(e.target.value)}
      />
      <button type="submit">搜索</button>
    </form>
  );
}

上面的代码中，我们创建了一个 SearchBar 组件，它接受 onSearch 函数作为 props。onSearch 函数将会在表单提交时被调用，并把输入的关键字作为参数传入。

handleSubmit 函数被用来处理表单提交事件。在用户点击提交按钮时，它会调用 onSearch 函数并重置 input state。input state 的值被绑定到了 input 标签上，所以用户输入的值可以被实时地反映出来。

Django

在 Django 中，我们需要使用 queryset 来过滤数据。假设我们有一个模型叫做 Book，它有一个字段叫做 title。我们可以用以下代码来定义一个视图（view）函数来搜索这些书籍：

from django.db.models import Q
from django.views import generic
from .models import Book

class BookSearchView(generic.ListView):
    model = Book
    template_name = 'book/search_results.html'

    def get_queryset(self):
        query = self.request.GET.get('q')
        queryset = super().get_queryset()

        if query:
            queryset = queryset.filter(
                Q(title__icontains=query)
            )

        return queryset

这个视图函数定义了一个 BookSearchView 类，它继承了 generic.ListView。这意味着它将会渲染 book/search_results.html 模板和 Book 模型的查询结果。

在视图函数中，get_queryset 方法被用来处理查询。它从 GET 请求中获取关键字，使用 Q 对象来构建查询条件。可以根据需要定制查询条件。

对于这个搜索栏，我们需要将表单提交的查询关键字传递给视图函数。在模板中，我们可以这样引用 SearchBar 组件：

<form action="{% url 'book-search' %}" method="get">
  <input name="q" type="text" />
  <button type="submit">搜索</button>
</form>

{% with books=object_list %}
  {% include 'book/book_list.html' %}
{% endwith %}

在表单中，我们创建了一个 name 为 "q" 的输入框，并把它的值作为 GET 请求的参数。当用户点击提交按钮时，它将会触发搜索功能。

在模板中，我们使用 object_list 变量来表示视图函数的查询结果。我们可以在 book_list.html 模板中使用这个变量来显示搜索结果。

结语

通过本篇文章，我们学习了如何使用 React 和 Django 制作一个搜索栏。我们使用了 React hooks 来捕捉用户的输入，使用 Django 的视图函数和查询集来处理搜索请求。如果你希望搜索功能更加强大，你可以使用其他 Django 库来处理自然语言搜索、拼写纠错等操作。