如何在React中创建搜索栏

npm install -g create-react-app

npx create-react-app my-search-app

cd my-search-app
npm start

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) => {
    // 在这里处理搜索逻辑
    console.log("Searching for:", query);
  };

  return (
    <div className="App">
      <h1>Search App</h1>
      <SearchBar onSearch={handleSearch} />
    </div>
  );
};

export default App;