React를 사용하여 필터링 함수 작성

Question

react useState에서 입력 값 이벤트가 수신될 때 실행되는 필터 함수를 만들고 싶지만 입력을 시작하면 아무것도 수행하는 것을 볼 수 없습니다. 이것은 내 검색 구성 요소입니다

검색 기능 내보내기({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>
    )
}

그런 다음 여기를 사용하세요

const 레이아웃 = ({ 카테고리, 하위 }) =>
  const [filteredCategories, setFilteredCategories] = useState(categories);

  const handlerSearch = (filteredCategories) =>
    setFilteredCategories(filteredCategories);
  };

  반품 (
    <div>
      {/* ... */}
      <검색 카테고리={categories} onSearch={handleSearch} />
      {/* ... */}
      {어린이들}
    </div>
  );
};

기본 레이아웃 내보내기;

그런 다음 이 구성요소는 홈 구성요소에서 사용됩니다

기본 함수 내보내기 Home({ 게시물, 카테고리 }) {

  반품 (
    <레이아웃 카테고리={카테고리}>
      <div className="mt-20">
        <main className="flex flex-col justify-center items-center h-screen pt-10 pb-30">
          {/* 렌더링 포스트 */}
        </메인>
      </div>
    </레이아웃>
  );
}

이 기능을 작동시키려면 제가 해야 할 일이 있나요?

Answer 1

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

을 배치합니다. 으아악

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