ゼロからの反応自動補完コンポーネントの構築

Autocompleteあなたのアプリケーションの訪問者に優れたユーザーエクスペリエンスを提供します.また、検索中に冗長スペルミスを避けるために役立ちます.
この投稿では、ゼロからの反応自動完了コンポーネントを構築します.
次に、あなたはそれを共有することができますBit コレクション、およびすべてのアプリケーションでそれを使用する!それはあなたが速く、共有を構築するために使用できる再利用可能なレゴの部分になります.
Bit - Component Discovery and Collaboration
例:ビットと反応スピナー-選択、学ぶ、使用
API、またはデータベースを介してAJAXリクエストからオプションを取得できます.あなたが示すオプションの選択があります.配列にそれらを読み込みます.
ここでは、最終製品のようになります.

我々の建物

プロジェクトのコードが利用可能ですhere on codesandbox , また、ポストの末尾に埋め込まれます.

App
  >Autocomplete

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でいっぱい.
最初のautocompleteコンポーネントがどのように見えるかを示します.

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;

データ検証

自動補完コンポーネントはオプションなしで役に立たない.オプションをすばやくデータ型エラーをキャッチする配列として検証する必要があります.反応プロペラは、この正確なことを行います.
また、強制的に設定するか、デフォルト値を設定することができます.

import PropTypes from 'prop-types';

オプションを使用してクラス内の必須で配列型としてマークすることができます

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

親コンポーネントからオプションを渡さないと、コンソールにエラーが発生します.

ここまでのコードの出力です.

まあ、何もしない.

ユーザー入力

利用できるユーザ:

アクティブなオプションを上下の矢印キーを変更します.

マウスクリックでクリックするか、復帰(Enter)キーを押すことによって、オプションを選んでください.

必要なメソッド:
onchange :入力変更時にオプションをチェックする
onkeydown :返り値と矢印キーを確認する
値:onChangeユーザーが入力フィールドに入力するのをブロックしますので、この方法で値を入力しなければなりません.
必須:
showoptions : boolean ( true/false )
filteredoptions :ユーザ入力と一致する項目の配列.
ActiveOption :現在選択されている項目の場所です.
optionlistはJSXをオプションでレンダリングする
)そのユーザが選ぶことができます.レンダリングされたJSXは状態を使用し、状態が変更されたときに再描画されます.
これを使う場所はたくさんあります.状態.これをフィルタリングします.オンチェンジ私は名前を短く保つのが好きです.
ここでどのように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 = (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
    });
  };

これは小道具からオプションを取得するオプションは、提案に使用されます.また、ユーザー入力を目標値(入力フィールド)に設定します.
これはフィルタオプションをフィルタリングします.
最初の項目( index 0 ) infilteredoptionsはデフォルトで選択された項目です.このリストは直接optionlistに影響します.
オンクリック

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

提案をオフにし、クリックした要素からテキストを入力フィールドに置きます.
オンキーダウン
KeyDownイベントを処理します.
戻りキー(13)は、Clickイベントと同じものを行い、項目を選択し、入力フィールドに値を設定します.
下矢印(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 });
    }
  };

あなたが反応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で、入力領域は空白ではありません.
FilteredOptionsを使用してリストを作成します.また、アクティブなオプションはアクティブなクラス名を取得します.これは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