React를 사용하여 필터링 함수 작성
<p>react useState에서 입력 값 이벤트가 수신될 때 실행되는 필터 함수를 만들고 싶지만 입력을 시작하면 아무것도 수행하는 것을 볼 수 없습니다. 이것은 내 검색 구성 요소입니다</p>
<pre class="brush:php;toolbar:false;">검색 기능 내보내기({categories, onSearch}){
const [searchText, setSearchText] = useState('');
const filterCategories = () =>
constfilteredCategories = 카테고리.필터(카테고리 =>
카테고리.이름.toLowerCase().includes(searchText.toLowerCase())
);
onSearch(filteredCategories);
};
const handlerInputChange = 이벤트 =>
setSearchText(event.target.value);
필터카테고리();
};
반품 (
<div className="flex items-center">
<form className='flex space-x-1' >
<입력
유형="텍스트"
className="w-full px-4 py-2 text-purple-700 bg-white 테두리 반올림-전체 초점 차단:border-purple-400 초점:ring-purple-300 초점:outline-none 초점:링 초점:링 -불투명도-40"
자리 표시자="검색..."
값={searchText}
onChange={handleInputChange}
/>
</양식>
</div>
)
}</pre>
<p>그런 다음 여기를 사용하세요</p>
<pre class="brush:php;toolbar:false;">const 레이아웃 = ({ 카테고리, 하위 }) =>
const [filteredCategories, setFilteredCategories] = useState(categories);
const handlerSearch = (filteredCategories) =>
setFilteredCategories(filteredCategories);
};
반품 (
<div>
{/* ... */}
<검색 카테고리={categories} onSearch={handleSearch} />
{/* ... */}
{어린이들}
</div>
);
};
기본 레이아웃 내보내기;</pre>
<p>그런 다음 이 구성요소는 홈 구성요소에서 사용됩니다</p>
<pre class="brush:php;toolbar:false;">기본 함수 내보내기 Home({ 게시물, 카테고리 }) {
반품 (
<레이아웃 카테고리={카테고리}>
<div className="mt-20">
<main className="flex flex-col justify-center items-center h-screen pt-10 pb-30">
{/* 렌더링 포스트 */}
</메인>
</div>
</레이아웃>
);
}</pre>
<p>이 기능을 작동시키려면 제가 해야 할 일이 있나요? </p>