尝试在我的图片库应用程序中添加搜索栏，但它不起作用

Question

我在我的图片库应用程序中添加了搜索栏，它从 pixabay api 获取图像，我已经完成了所有操作，但由于某种原因它无法正常工作。我是 Reactjs 新手，所以如果我犯了任何愚蠢的错误，请原谅。

这是我的应用程序级别代码

import './App.css';
import React, { useEffect, useState } from 'react'
import ImageCard from './ImageCard.js'
import Search from './Search';

function App() {
  const [images, setImages] = useState([]);
  const [term, setTerm] = useState('');


  useEffect(() => {
    fetch(`https://pixabay.com/api/?key=43750982-cccb38e876ce2f6037a8568fd&q=${term}&image_type=photo&pretty=true`)
      .then(response => response.json())
      .then(data => {
        setImages(data.hits);
      })

  }, [term]);

  return (

    <div className= "container mx-auto">
<Search searchText={(text) => setTerm(text)}  />
      <div className="grid grid-cols-4 gap-4">

        {images.map(image => (
          <ImageCard key={image.id} image={image} />
        ))} </div>
    </div>);
}
export default App;

这是我的搜索栏组件代码：

import React, { useState } from 'react'

const Search = ({ searchText }) => {
 
 const[text, setText]= useState('');  
 const onSubmit = (e) => {
    e.preventdefault();
    searchText(text);

 } 
    return (
        <div className='mt-7 mb-7'>


            <form onSubmit={onSubmit}  className="max-w-md mx-auto">
                <label for="default-search" className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
                <div className="relative">
                    <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                        <svg className="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                        </svg>
                    </div>
                    <input onChange={e => setText(e.target.value) } npm run buildtype="search" id="default-search" className="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search anything" required />
                    <button type="submit" className="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Search</button>
                </div>
            </form>


        </div>
    )
}

export default Search;

Answer 1

您的输入标签中有一个“npm run build”，请尝试将其删除。

<input onChange={e => setText(e.target.value)} type="search" id="default-search" className="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search anything" required />