React.js에서 검색 창 만들기

이 블로그는 react.js에 대한 기본적인 이해가있는 사람들을위한 것입니다.

이 블로그에서는 상단에 검색 창을 표시하고 아래에 꽃 이름 목록 (가짜 데이터라고도 함)을 표시하는 react.js에 간단한 애플리케이션을 구축 할 것입니다. 검색 창을 통해 가짜 데이터를 검색하고 화면에 꽃 이름을 즉시 표시하는 입력 필드에 입력 할 수 있습니다. 이를 위해 클래스 기반 컴포넌트를 사용할 것입니다.

시작하기

새 반응 프로젝트를 만들려면 다음을 실행하세요.

출처 : https://reactjs.org/docs/create-a-new-react-app.html

아래 강조 표시된대로 불필요한 파일을 모두 제거하십시오.

src 폴더에 구성 요소 하위 폴더를 만듭니다. 그런 다음 FlowersContainer 및 SearchBar라는 두 개의 하위 구성 요소를 만듭니다.

CSS 스타일링에 다음 코드를 사용하십시오. 원하는대로 응용 프로그램의 스타일을 지정할 수 있습니다.

앱 구성 요소 설정

App.js는 모든 데이터 및 인스턴스 메서드가 저장되는 주요 구성 요소입니다. 내 코드는 아래 이미지를 참조하십시오.

이제이 코드를 분석해 보겠습니다!

7 행 : 상태

state 객체에는 값으로 꽃 이름 배열이있는 "flowers"상태가 있습니다. 또한 검색 입력 필드에 입력 할 검색어를 나타내는 값으로 빈 문자열이있는 "searchTerm"상태도 있습니다.

21 행 : handleSearchTermChange 함수

handleSearchTermChange 함수는 SeachBar 구성 요소에서 소품으로 전달됩니다. 트리거되면 setState는 "searchTerm"값을 업데이트합니다.

25 행 : filterFlower 함수

filterFlower 함수는 아래 필터 메서드에서 전달되는 콜백 함수입니다. toLowerCase () 메서드는 문자열을 소문자로 변경합니다. split () 메서드는 문자열의 각 공간에서 문자열을 하위 문자열로 나누고 하위 문자열을 배열에 배치합니다. 그런 다음 join () 메서드는 해당 문자열 배열을 공백없이 하나의 문자열로 결합합니다. 사용자가 입력 필드에 입력 할 때 입력은 대소 문자를 구분하지 않을 수 있으며 여러 단어가있는 꽃 이름의 빈 공간을 무시합니다. 꽃에 "indexOf (normalized)! == -1"도 포함 된 것을 눈치 채 셨을 것입니다. 이것은 우리가 입력하는 문자열이 꽃 이름에 존재하는지 확인합니다.

30 행 : JSX

App 구성 요소의 render 메서드에는 SearchBar 자식 구성 요소와 FlowersContainer 구성 요소가 전달 된 필터 및 맵 메서드가 있습니다. filter 메서드는 filterFlower 함수 인 테스트를 통과하는 모든 꽃 이름을 가진 새 배열을 만듭니다. 그런 다음 필터링 된 꽃 배열을 가져와 개별 꽃 구성 요소로 구문 분석하는 map 메서드를 호출합니다.

FlowersContainer 구성 요소 생성

FlowersContainer 구성 요소는 검색 입력 필드에 입력하는 것과 유사한 요소를 표시합니다.

SearchBar 구성 요소 만들기

SearchBar 구성 요소에는 searchTerm을“e.target.value”로 설정하는 handleSearchTermChange 함수를 전달하는 onChange 이벤트가 포함되어 있습니다. 검색 입력 필드에 입력하면 handleSearchTermChange에서 setState가 트리거 된 다음 앱 구성 요소가 다시 렌더링됩니다.