처음부터 React 자동 완성 구성 요소 만들기

Autocomplete는 어플리케이션 방문자에게 탁월한 사용자 환경을 제공합니다.검색할 때 반복적인 맞춤법 오류를 피하는 데도 도움이 된다.
본고에서, 우리는 처음부터 React 자동 완성 구성 요소를 구축할 것이다.
그리고 그것을 당신의 Bit 소장품에 공유하고 모든 응용 프로그램에서 사용할 수 있습니다!그것은 다시 사용할 수 있는 레고 블록이 될 것이며, 그것을 사용하여 더욱 빨리 구축하고 공유할 수 있다.
Bit - Component Discovery and Collaboration
예: 비트를 사용하여 마이크로 모뎀에 반응-선택, 학습, 사용
API 또는 데이터베이스를 통해 AJAX 요청에서 옵션을 얻을 수 있습니다.표시할 옵션을 선택할 수 있습니다.그룹에 불러오기만 하면 됩니다.
다음은 최종 제품의 외관입니다.

뭐 공부 해요?

이 항목의 코드는 사용할 수 있습니다 here on codesandbox. 또한 글의 끝에 삽입됩니다.

App
  >Autocomplete

자동 완성 구성 요소는 용기 구성 요소 프로그램이 있습니다. 이 프로그램은 옵션을 그룹의 자동 완성 구성 요소에 전달합니다.

import React, { Component } from 'react';
import './App.css';
import Autocomplete from './Autocomplete';
const App = () => {
  return (
    <div className="App">
      <Autocomplete
        options={[
          'Papaya',
          'Persimmon',
          'Paw Paw',
          'Prickly Pear',
          'Peach',
          'Pomegranate',
          'Pineapple'
        ]}
      />
    </div>
  );
};

export default App;

구성 요소 자동 완성

이것이 바로 모든 일이 발생한 곳이다.나는 here on codepen 에서 초기 검색 상자를 잡았다.기본 인덱스를 비웁니다.css 및 새 css를 채웁니다.
다음은 처음에 자동으로 완성된 어셈블리의 모양입니다.

import React, { Component } from 'react';

export class Autocomplete extends Component {
  render() {
    return (
      <React.Fragment>
        <div className="search">
          <input type="text" className="search-box" />
          <input type="submit" value="" className="search-btn" />
        </div>
      </React.Fragment>
    );
  }
}

export default Autocomplete;

데이터 검증

이 옵션이 없으면 자동으로 구성 요소를 완성하는 것은 쓸모가 없습니다.데이터 형식의 오류를 신속하게 포착하기 위해 옵션을 수조로 검증해야 합니다.React proptype은 이렇게 합니다.
또한 도구를 강제 도구로 표시하거나 기본값을 설정할 수 있습니다.

import PropTypes from 'prop-types';

를 사용하여 클래스 내에서 옵션을 강제 및 배열 유형으로 표시할 수 있습니다.

static propTypes = {
  options: PropTypes.instanceOf(Array).isRequired;
};

부모 구성 요소에서 옵션을 전달하지 않으면 컨트롤러에서 오류가 발생합니다.

이것은 지금까지 우리의 코드 출력...

응, 그것은 아무것도 하지 않았어.

사용자 입력

사용자는 다음을 수행할 수 있습니다.

위/아래 화살표 키를 사용하여 활성 옵션을 변경합니다.

마우스로 클릭하거나 Enter 키를 눌러 옵션을 선택합니다.

필요한 방법:
onChange: 변경 사항을 입력할 때 옵션 확인
onKeyDown: 반환 키 및 화살표 키 확인
값: onChange는 사용자가 입력 필드에 내용을 입력하지 못하게 하기 때문에 이 방법으로 값을 채워야 합니다.
요구 사항:
showOptions: 부울 값(진짜/가짜)
filteredOptions: 사용자 입력과 일치하는 항목 배열.
activeOption: filteredOptions에서 현재 선택한 항목의 위치, 인덱스 (번호) 입니다.
optionList는 옵션을 사용하여 JSX를 표시합니다.
) 사용자는 에서 선택할 수 있습니다.렌더링된 JSX는 상태를 사용하고 상태가 변경될 때 다시 렌더링됩니다.
이걸 사용할 수 있는 곳이 많아요.상태filteredOptions 또는일단 바뀌면나는 이름을 줄이는 것을 좋아해서 모든 상태와 방법에 대해 대상 분해를 사용했다.
다음은 Autocomplete의 현재 모양입니다.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export class Autocomplete extends Component {
  static propTypes = {
    options: PropTypes.instanceOf(Array).isRequired
  };
  state = {
    activeOption: 0,
    filteredOptions: [],
    showOptions: false,
    userInput: ''
  };
  render() {
    const {
      onChange,
      onChange,
      onKeyDown,
      userInput,
      state: { activeOption, filteredOptions, showOptions, userInput }
    } = this;
    let optionList;
    return (
      <React.Fragment>
        <div className="search">
          <input
            type="text"
            className="search-box"
            onChange={onChange}
            onKeyDown={onKeyDown}
            value={userInput}
          />
          <input type="submit" value="" className="search-btn" />
          {optionList}
        </div>
      </React.Fragment>
    );
  }
}

export default Autocomplete;

onChange 회사
사용자가 입력 필드에서 변경을 진행할 때, 우리는 어떤 일이 발생하기를 희망한다.

onChange = (e) => {
    const { options } = this.props;
    const userInput = e.currentTarget.value;

const filteredOptions = options.filter(
      (option) => option.toLowerCase().indexOf(userInput.toLowerCase()) > -1
    );

this.setState({
      activeOption: 0,
      filteredOptions,
      showOptions: true,
      userInput
    });
  };

이것은 도구에서 옵션을 가져옵니다. 옵션은 제안에 사용됩니다.또한 userInput를 대상 값(입력 필드)으로 설정합니다.
이것은 필터 옵션에 사용할 옵션을 필터합니다. 필터 조건은 그룹의 값을 입력한 사용자가 하위 문자열을 입력하는 것입니다.
첫 번째 항목 (인덱스 0) infiteredoptions는 기본 선택 항목입니다.이 목록은 옵션 목록에 직접적인 영향을 줍니다.
onClick 회사

onClick = (e) => {
    this.setState({
      activeOption: 0,
      filteredOption: [],
      showOptions: false,
      userInput: e.currentTarget.innerText
    });
  };

이것은 제안을 닫고 요소의 텍스트를 입력 필드에 넣습니다.
onKeyDown
버튼 이벤트를 처리합니다.
반환키(13)는 클릭 이벤트와 같은 작업을 수행하고 항목을 선택하고 입력 필드에 값을 넣습니다.
아래쪽 화살표 (40) 에서 낮은 옵션을 선택합니다.위쪽 화살표(38)에서 위쪽 옵션을 선택합니다.그러나 마지막 옵션보다 낮거나 첫 번째 옵션보다 높지 않습니다.

onKeyDown = (e) => {
    const { activeOption, filteredOptions } = this.state;

if (e.keyCode === 13) {
      this.setState({
        activeOption: 0,
        showSuggestions: false,
        userInput: filteredOptions[activeOption]
      });
    } else if (e.keyCode === 38) {
      if (activeOption === 0) {
        return;
      }

this.setState({ activeOption: activeOption - 1 });
    } else if (e.keyCode === 40) {
      if (activeOption - 1 === filteredOptions.length) {
        return;
      }

this.setState({ activeOption: activeOption + 1 });
    }
  };

React-Dev 도구를 사용하면 변경 사항을 볼 수 있습니다.

이제 이 상태를 인터페이스로 바꾸고 사용자가 옵션을 선택할 때가 되었다.

옵션 소유자

optionList는 최종 사용자의 옵션 선택 인터페이스입니다.

let optionList;
    if (showOptions && userInput) {
      if (filteredOptions.length) {
        optionList = (
          <ul className="options">
            {filteredOptions.map((optionName, index) => {
              let className;
              if (index === activeOption) {
                className = 'option-active';
              }
              return (
                <li className={className} key={optionName} onClick={onClick}>
                  {optionName}
                </li>
              );
            })}
          </ul>
        );
      } else {
        optionList = (
          <div className="no-options">
            <em>No Option!</em>
          </div>
        );
      }
    }

showOptions는 true이며 입력 영역이 비어 있지 않습니다.
그것은 필터 옵션을 통해 목록을 만듭니다.또한 active 옵션은 active className 옵션을 가져옵니다.이것은 색인에서 css를 사용하여 설계한 것입니다.css.
이것은 그것의 모습이다.

입력한 필드 값이 어떤 내용과 일치하지 않으면 옵션이 없음을 나타냅니다.

아래에는 Codesandbox 프레젠테이션이 포함되어 있습니다.
https://medium.com/media/75a78e88dcd5f394137e9bc5080ab4e8/href

결론

따라서 우리는 사용자가 누릴 수 있는 자동 완성 구성 요소를 만들어서 당신의 제품에 더욱 좋은 체험을 창조했습니다.혼란과 오류를 줄이고 응용 프로그램을 빠르게 탐색할 수 있도록 도와줍니다.
언제든지 논평을 발표하고 저에게 어떤 질문을 하세요!기꺼이 도와드리겠습니다:)

자세한 내용

5 Tools for Faster Development in React

11 React UI Component Libraries you Should Know in 2019

11 JavaScript Animation Libraries For 2019