React를 사용하여 필터링 함수 작성
P粉596191963
P粉596191963 2023-08-16 20:02:19
0
1
575
<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>
P粉596191963
P粉596191963

모든 응답(1)
P粉431220279

레이아웃 구성요소에서 categories的值传递给你的Search组件,你可能想要传递filteredCategories

을 배치합니다. 으아악

(filteredCategories사용하지 않아서 아무 일도 없었던 것 같은 느낌)

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿