序章

オートコンプリートは、入力フィールドがユーザー入力に基づいて単語を提案する機能です。 これは、検索が必要な場合など、アプリケーションのユーザーエクスペリエンスを向上させるのに役立ちます。

この記事では、Reactでオートコンプリートコンポーネントを構築する方法を検討します。 提案の固定リスト、イベントバインディング、キーボードコードの理解、および状態管理の操作を行います。

前提条件

このチュートリアルを完了するには、次のものが必要です。

ステップ1—Autocompleteコンポーネントを構築する

Autocompleteコンポーネントは、オートコンプリート機能の機能を作成する場所です。

Autocomplete.jsファイルを作成し、Reactをインポートして、Autocompleteクラスをインスタンス化します。

Autocomplete.js
import React, { Component, Fragment } from "react";
import './styles.css'

class Autocomplete extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeSuggestion: 0,
      filteredSuggestions: [],
      showSuggestions: false,
      userInput: ""
    };
  }

あなたの州では、activeSuggestionプロパティは、選択された提案のインデックスを定義します。 空の配列に設定されたプロパティfilteredSuggestionsは、ユーザーの入力と一致します。 showSuggestionsプロパティは、提案リストを表示するかどうかを決定し、userInputプロパティは、ユーザーの入力から単語を受け入れるための空の文字列を自分自身に割り当てます。

クラスを開始して状態を設定したら、コンポーネントに適用するメソッドを見てみましょう。

Autocomplete.jsファイルで、onChangeメソッドを定義し、状態を更新します。

Autocomplete.js
  onChange = e => {
    const { suggestions } = this.props;
    const userInput = e.currentTarget.value;

    const filteredSuggestions = suggestions.filter(
      suggestion =>
        suggestion.toLowerCase().indexOf(userInput.toLowerCase()) > -1
    );

    this.setState({
      activeSuggestion: 0,
      filteredSuggestions,
      showSuggestions: true,
      userInput: e.currentTarget.value
    });
  };

メソッドonChangeは、ユーザーが入力値を変更したときに起動します。 変更のたびに、メソッドは提案リストにフィルターをかけ、ユーザーの入力を含まない提案を返します。 フィルタが実行されると、.setState()メソッドは、状態のuserInputプロパティを修正して値を含め、showSuggestionsブール値を設定して提案を表示できるようにし、[X186X各メソッド呼び出しの]