Rumah  >  Soal Jawab  >  teks badan

Gunakan React untuk menulis fungsi penapisan

<p>Saya mahu mencipta fungsi penapis yang menyala apabila peristiwa nilai input diterima dalam useState bertindak balas, tetapi apabila saya mula menaip, saya tidak dapat melihatnya melakukan apa-apa. Ini ialah komponen Carian saya</p> <pre class="brush:php;toolbar:false;">fungsi eksport Carian({kategori, onSearch}){ const [searchText, setSearchText] = useState(''); const filterCategories = () => const filteredCategories = categories.filter(category => category.name.toLowerCase().includes(searchText.toLowerCase()) ); onSearch(filteredCategories); }; const handleInputChange = acara => setSearchText(event.target.value); filterCategories(); }; kembali ( <div className="flex items-center"> <form className='flex space-x-1' > <masukan type="text" className="block w-full px-4 py-2 text-purple-700 bg-white border rounded-full focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring -kelegapan-40" pemegang tempat="Cari..." value={searchText} onChange={handleInputChange} /> </form> </div> ) }</pre> <p>Kemudian gunakan</p> <pre class="brush:php;toolbar:false;">Const Layout = ({ kategori, kanak-kanak }) => const [filteredCategories, setFilteredCategories] = useState(kategori); const handleSearch = (filteredCategories) => setFilteredCategories(filteredCategories); }; kembali ( <div> {/* ... */} <Kategori carian={categories} onSearch={handleSearch} /> {/* ... */} {anak-anak} </div> ); }; eksport Reka Letak lalai;</pre> <p>Kemudian komponen ini digunakan dalam komponen Laman Utama</p> <pre class="brush:php;toolbar:false;">eksport fungsi lalai Laman Utama({ posts, categories }) { kembali ( <Kategori reka letak={categories}> <div className="mt-20"> <main className="flex flex-col justify-center items-center h-screen pt-10 pb-30"> {/* Paparkan siaran */} </utama> </div> </Layout> ); }</pre> <p>Adakah terdapat apa-apa yang perlu saya lakukan untuk menjadikannya berfungsi? </p>
P粉596191963P粉596191963453 hari yang lalu550

membalas semua(1)saya akan balas

  • P粉431220279

    P粉4312202792023-08-17 14:42:05

    Dalam komponen Layout, anda meletakkan categories的值传递给你的Search组件,你可能想要传递filteredCategories

    const Layout = ({ categories, children }) => {
      const [filteredCategories, setFilteredCategories] = useState(categories);
    
      const handleSearch = (filteredCategories) => {
        setFilteredCategories(filteredCategories);
      };
    
      return (
        <div>
          {/* ... */}
          <Search
            categories={filteredCategories} // 这里
            onSearch={handleSearch}
          />
          {/* ... */}
          {children}
        </div>
      );
    };
    
    export default Layout;

    (filteredCategoriestidak digunakan, yang membuatkan anda berasa seperti tiada apa yang berlaku)

    balas
    0
  • Batalbalas