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>