Reactでオートコンプリートコンポーネントを構築する方法
序章
オートコンプリートは、入力フィールドがユーザー入力に基づいて単語を提案する機能です。 これは、検索が必要な場合など、アプリケーションのユーザーエクスペリエンスを向上させるのに役立ちます。
この記事では、Reactでオートコンプリートコンポーネントを構築する方法を検討します。 提案の固定リスト、イベントバインディング、キーボードコードの理解、および状態管理の操作を行います。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Reactの理解が必要です。 Reactの詳細については、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各メソッド呼び出しの]プロパティ。
onClickイベントは、ユーザーが提案をクリックしたときに呼び出されます。 Autocomplete.jsファイルで、onClickメソッドを宣言し、.setState()メソッドを実装します。
Autocomplete.js
onClick = e => {
this.setState({
activeSuggestion: 0,
filteredSuggestions: [],
showSuggestions: false,
userInput: e.currentTarget.innerText
});
};
.setState()メソッドは、ユーザーの入力を更新し、状態のプロパティをリセットします。
onKeyDownメソッドは、ユーザーがキーを押したときに有効になります。 Autocomplete.jsファイルで、onKeyDownメソッドを宣言し、いくつかの条件を設定します。
Autocomplete.js
onKeyDown = e => {
const { activeSuggestion, filteredSuggestions } = this.state;
if (e.keyCode === 13) {
this.setState({
activeSuggestion: 0,
showSuggestions: false,
userInput: filteredSuggestions[activeSuggestion]
});
} else if (e.keyCode === 38) {
if (activeSuggestion === 0) {
return;
}
this.setState({ activeSuggestion: activeSuggestion - 1 });
}
// User pressed the down arrow, increment the index
else if (e.keyCode === 40) {
if (activeSuggestion - 1 === filteredSuggestions.length) {
return;
}
this.setState({ activeSuggestion: activeSuggestion + 1 });
}
};
プロパティactiveSuggestionおよびfilteredSuggestionを分解されたオブジェクトに保存すると、条件文は、ユーザーが押したキーがキーコードと一致するかどうかをチェックします。 最初の条件は、キーコードが13、エンターキーと一致するかどうかを確認し、.setState()メソッドを実行して、userInputプロパティを更新し、提案リストを閉じます。 ユーザーが上矢印、キーコード38を押すと、条件はactiveSuggestionプロパティのインデックスをデクリメントし、インデックスがゼロの場合は何も返しません。 ユーザーが下矢印、キーコード40を押すと、条件はactiveSuggestionプロパティのインデックスをインクリメントし、インデックスがfilteredSuggestionsの長さと一致する場合は何も返しません。 ] 財産。
メソッドが完成したので、renderライフサイクルメソッドの適用に進みましょう。
Autocomplete.jsファイルで、render()ステートメントを設定し、分解されたオブジェクトでメソッドと状態を定義します。
Autocomplete.js
render() {
const {
onChange,
onClick,
onKeyDown,
state: {
activeSuggestion,
filteredSuggestions,
showSuggestions,
userInput
}
} = this;
let suggestionsListComponent;
変数suggestionsListComponentには、以下の条件で割り当てるため、定義された値はありません。
Autocomplete.js
if (showSuggestions && userInput) {
if (filteredSuggestions.length) {
suggestionsListComponent = (
<ul class="suggestions">
{filteredSuggestions.map((suggestion, index) => {
let className;
// Flag the active suggestion with a class
if (index === activeSuggestion) {
className = "suggestion-active";
}
return (
<li className={className} key={suggestion} onClick={onClick}>
{suggestion}
</li>
);
})}
</ul>
);
} else {
suggestionsListComponent = (
<div class="no-suggestions">
<em>No suggestions available.</em>
</div>
);
}
}
最初の条件は、プロパティshowSuggestionsおよびuserInputの値が存在するかどうかをチェックし、次の条件は、filteredSuggestionsプロパティの長さをチェックします。 条件が満たされると、suggestionsListComponent変数は、filteredSuggestionsプロパティを反復処理する値を割り当て、インデックスが [の値と一致する場合、クラス名でアクティブな提案にフラグを立てます。 X211X]プロパティ。 suggestionsListComponent変数は、onClickメソッドの実行時に提案の順序付きリストを返し、各提案にクラス名を割り当てます。 プロパティshowSuggestionsおよびuserInputの値が存在しない場合、利用可能な提案がないことを示すテキストが表示されます。
ユーザーがリストされた条件を満たさない場合、render()ライフサイクルメソッドはReactFragmentを返し、入力フィールドを適用して、ドキュメントオブジェクトモデルにノードを追加せずにメソッドを呼び出します。
Autocomplete.js
return (
<Fragment>
<input
type="text"
onChange={onChange}
onKeyDown={onKeyDown}
value={userInput}
/>
{suggestionsListComponent}
</Fragment>
);
}
}
export default Autocomplete;
Autocompleteコンポーネントを開発したので、ファイルをエクスポートして、その機能を別のコンポーネントに結合します。
ステップ2—Reactプロジェクトに参加する
Appコンポーネントは、Autocompleteコンポーネントの機能を表示する場所です。 index.jsファイルで、Appコンポーネントを宣言し、Autocompleteコンポーネントをインポートします。
index.js
import React from "react";
import Autocomplete from "./Autocomplete";
function App() {
return (
<div>
<h1>React Autocomplete Demo</h1>
<h2>Start typing and experience the autocomplete wizardry!</h2>
<Autocomplete suggestions={"Oranges", "Apples", "Banana", "Kiwi", "Mango"]}/>
</div>
);
}
export default App
Appコンポーネントのreturnステートメントは、提案の固定リストを持つAutocompleteコンポーネントを受け入れます。
ステップ3—Autocompleteコンポーネントのスタイリング
Autocompleteコンポーネントを完成させるには、CSSを使用してスタイルを追加し、アプリケーションと入力フィールドの位置と色を設定します。
styles.cssファイルを作成し、CSSルールを設定してAutocompleteコンポーネントを形成します。
styles.css
body {
font-family: sans-serif;
}
input {
border: 1px solid #999;
padding: 0.5rem;
width: 300px;
}
.no-suggestions {
color: #999;
padding: 0.5rem;
}
.suggestions {
border: 1px solid #999;
border-top-width: 0;
list-style: none;
margin-top: 0;
max-height: 143px;
overflow-y: auto;
padding-left: 0;
width: calc(300px + 1rem);
}
.suggestions li {
padding: 0.5rem;
}
.suggestion-active,
.suggestions li:hover {
background-color: #008f68;
color: #fae042;
cursor: pointer;
font-weight: 700;
}
.suggestions li:not(:last-of-type) {
border-bottom: 1px solid #999;
}
CSSルールを作成したら、ファイルをAutocomplete.jsファイルにインポートしてスタイルを適用します。
結論
Reactは、ユーザーと対話するための組み込みメソッドとカスタムメソッドを使用して、1つのコンポーネントで利用可能なオートコンプリート機能を構築するための手段を提供します。
CodeSandboxでオートコンプリートコンポーネントがどのように動作するかを確認してください。
