React useState フックで配列値を更新する
-
React
useStateフックの配列値をuseEffectで更新 -
React
useStateフックの配列値をonClickイベントで更新 -
React の
useStateフックでマウスイベントを使用して配列の値を更新する - まとめ
顧客が選択できる Web アプリのオプションの拡張リストを作成したいプログラマーにとって、ドロップダウンメニューを使用することはこれを行うための最も効率的な方法の 1つです。顧客に 10 か国のリストから選択してラジオボタンオプションを使用してもらいたい場合、Web サイトが混雑しているように見え、レンダリングが遅くなります。
ただし、ドロップダウンオプションを使用すると、Web サイトがシンプルに見えます。50 か国のリストであっても、ユーザーはオプションをクリックするまで、そのようなリストが Web サイトに埋め込まれていることすらわかりません。
また、ユーザーが必要なオプションを正確に選択するのにも役立ちます。ドロップダウンメニューでアルファベット順のショートカットを使用できるため、オプションをすばやく選択することもできます。
React フレームワークの柔軟性は、これを実行するためのさまざまな、しかし一流の方法を利用します。これらの方法のいくつかを消化してみましょう。
React useState フックの配列値を useEffect で更新
React で useEffect 関数を適用すると、コンポーネントの状態を元の状態から別の状態に移行するのに役立ちます。
この例では、ページがレンダリングされると、それがレンダリングされたコンポーネントの元の状態になります。次に、クリックしてドロップダウンからアイテムを選択すると、コンポーネントは別の状態に移動しました。それが useEffect の仕事です。
次に、プロジェクトフォルダーの index.js ファイルに移動し、次のコードを記述します。
コードスニペット-index.js：
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const StateSelector = () => {
const initialValue = [{ id: 0, value: " --- Select a State ---" }];
const allowedState = [
{ id: 1, value: "Alabama" },
{ id: 2, value: "Georgia" },
{ id: 3, value: "Tennessee" }
];
const [stateOptions, setStateValues] = useState(initialValue);
console.log(initialValue.length);
useEffect(() => {
setStateValues(allowedState);
}, []);
return (
<div>
<label>Select a State:</label>
<select>
{stateOptions.map((localState, index) => (
<option key={localState.id}>{localState.value}</option>
))}
</select>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<StateSelector />, rootElement);
出力：
この例は、元のページがレンダリングされ、状態の選択が表示されることを示しています。ドロップダウンのリストは、コンポーネントが移動する新しい状態です。
ここで、useEffect を割り当てて allowedState 配列の値の状態を設定するときに、この命令を定義します。
React useState フックの配列値を onClick イベントで更新
このメソッドは、onClick イベントリスナーを利用して、コンポーネントを初期状態の Choose One から新しい状態に移動します。
まず、プロジェクトフォルダの src フォルダ内に新しいファイル Dropdown.js を作成する必要があります。ここで、onClick イベントリスナーの機能を定義します。
次に、エディターで Dropdown.js ファイルを開き、いくつかのコードを記述します。
コードスニペット-Dropdown.js：
import { useState } from "react";
function Dropdown({ selected, setSelected }) {
const [isActive, setIsActive] = useState(false);
const options = ["Me", "You", "Us"];
return (
<div className="dropdown">
<div className="dropdown-btn" onClick={(e) => setIsActive(!isActive)}>
{selected}
<span className="fas fa-caret-down"></span>
</div>
{isActive && (
<div className="dropdown-content">
{options.map((option) => (
<div
onClick={(e) => {
setSelected(option);
setIsActive(false);
}}
className="dropdown-item"
>
{option}
</div>
))}
</div>
)}
</div>
);
}
export default Dropdown;
ドロップダウンをクリックすると、onClick がアクティブになり、イベントリスナーにマップした option コンポーネントにすぐにアクセスします。
次に、Dropdown.js ファイルをプロジェクトフォルダーの App.js にインポートして、レンダリングできるようにする必要があります。
コードスニペット-App.js
import "./App.css";
import Dropdown from "./Dropdown";
import { useState } from "react";
export default function App() {
const [selected, setSelected] = useState("Choose One");
return (
<div className="App">
<Dropdown selected={selected} setSelected={setSelected} />
<br />
<br />
<br />
{selected}
</div>
);
}
出力：
ここでは、Dropdown をインポートし、コンポーネントの初期状態を Choose One に設定しました。これは、onClick イベントリスナーがアクティブになったときに更新するものです。
次に、Dropdown を App div でラップし、レンダリングできるようにします。
React の useState フックでマウスイベントを使用して配列の値を更新する
この方法により、Web アプリは洗練された方法で表示および機能します。ユーザーはドロップダウンメニューの上にマウスを置くだけで、リストが表示されます。
この例では、onMouseEnter イベントと onMouseLeave イベントを適用します。新しいプロジェクトフォルダを作成した後、src フォルダ内に dropdown.js と dropdown.css の 2つのファイルを作成します。
dropdown.js ファイル内に、次のコードを記述します。
コードスニペット-Dropdown.js
import React, { useState } from 'react'
import './Dropdown.css';
function Dropdown() {
const [state, setstate] = useState(false);
const showDropdown=()=>{
setstate(true);
}
const hideDropdown=()=>{
setstate(false);
}
return (
<div className="dropdown">
<div className="dropdown-menu" onMouseEnter={showDropdown} onMouseLeave={hideDropdown}>
Dropdown
{state ?( <ul className="dropdown-list" onMouseEnter={showDropdown}>
<li>1st Value</li>
<li>2nd Value</li>
<li>3rd Value</li>
<li>4th Value</li>
</ul>):
null}
</div>
</div>
)
}
export default Dropdown;
このファイル onMouseEnter でマウスイベントを宣言し、イベントを showDropdown に割り当てることで、ドロップダウン内のアイテムを表示することを宣言しました。onMouseLeave にも同じことを行ったので、ドロップダウンメニューからマウスを離すと、リストされたアイテムが非表示になります。
次に、Dropdown を App.js ファイルにインポートし、App div 内にラップする必要があります。これを行うと、コンポーネントがレンダリングされます。
コードスニペット-App.js：
import React from 'react';
import Dropdown from './Dropdown';
function App() {
return (
<div>
<Dropdown/>
</div>
)
}
Web ページにいくつかのスタイリングを作成するために、以下の CSS を適用できます。
.dropdown {
height: 2rem;
}
.dropdown-menu{
width:20rem;
text-align: center;
color: black;
background: lightgray;
position: relative;
cursor: pointer;
padding: 2rem;
}
.dropdown-menu:hover{
color:white;
background: gray;
}
.dropdown-list{
list-style-type: none;
position: absolute;
bottom: -7rem;
left:0;
width:100%;
background:gray;
}
.dropdown-list>li{
border:1px solid transparent;
}
.dropdown-list>li:hover{
border:1px solid white;
}
出力：
まとめ
React のドロップダウン機能を利用することの重要性と有効性については疑いの余地がありません。適切に設計されたドロップダウンは、ドロップダウンのコンテンツが Web ページに読み込まれず、関数の背後に隠されているため、最適な速度で読み込まれている間、Web アプリを快適に表示します。
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn