如何使用reactjs为API数据创建搜索栏？

npx create-react-app my-app

import React, { useState } from 'react';

const SearchBar = ({ onSearch }) => {
  const [query, setQuery] = useState('');

  const handleInputChange = (event) => {
    setQuery(event.target.value);
  };

  const handleFormSubmit = (event) => {
    event.preventDefault();
    onSearch(query);
  };

  return (
    <form onSubmit={handleFormSubmit}>
      <input
        type="text"
        value={query}
        onChange={handleInputChange}
        placeholder="Search..."
      />
      <button type="submit">Search</button>
    </form>
  );
};

export default SearchBar;

import React from 'react';
import SearchBar from './SearchBar';

const App = () => {
  const handleSearch = (query) => {
    // 在这里执行API搜索操作
    console.log('Searching for:', query);
  };

  return (
    <div>
      <h1>My App</h1>
      <SearchBar onSearch={handleSearch} />
      {/* 其他组件和内容 */}
    </div>
  );
};

export default App;