我认为你可以创建一个函数，当用户输入任何文本时，它将调用api。同时，去抖动它，以避免频繁的api调用。

import React, { useCallback } from "react";

// Debounce to avoid frequent api calls
export const debounce = (func, waitFor) => {
  let timeout = null;

  const debounced = (...args) => {
    if (timeout !== null) {
      clearTimeout(timeout);
      timeout = null;
    }
    timeout = setTimeout(() => func(...args), waitFor);
  };

  return debounced;
};

const TestComponent = () => {
  // debounce the function so that we send api calls once user stops typing
  const searchSomething = useCallback(
    debounce(async (value) => {
      try {
        // Make your api call using whichever library you are using
        // let response = await fetch(`${YOUR_SERVER_URL}/search?query=${value}`);
        let response =  axios.get(`${YOUR_SERVER_URL}/search?query=${value}`)
        console.log(response);
      } catch (error) {
        console.log(error);
      }
    }, 500),
    []
  );

  return (
    <Form className="d-flex">
      <Form.Control
        type="search"
        placeholder="Search"
        className="me-2"
        aria-label="Search"
        onChange={(e) => {
          searchSomething(e.target.value);
        }}
      />
      <Button variant="outline-success">Search</Button>
    </Form>
  );
};

export default TestComponent;

您的axios调用应该以如下方式结束：

axios({
  method: 'post',
  url: '/login', // replace with your endpoint URL
  data: {
    searchField.name: searchField.value,
  }
});

其中searchField.name是Django希望在后端接收到的字段名（这里看起来是name），searchField.value是搜索字段的值。