Aktualisieren Array-Werte in React useState Hook

1. Aktualisieren Array-Werte in React useState Hook mit useEffect
2. Aktualisieren Array-Werte in React useState Hook mit dem onClick Event
3. Aktualisieren Sie Array-Werte in React useState Hook mit Mausereignissen
4. Fazit

Für einen Programmierer, der eine erweiterte Liste von Optionen in seiner Web-App erstellen möchte, aus der Kunden auswählen können, ist die Verwendung des Dropdown-Menüs eine der effizientesten Möglichkeiten, dies zu tun. Wenn wir möchten, dass ein Kunde aus der Liste der 10 Länder auswählt und die Optionsschaltfläche verwendet, sieht die Website überlastet aus und wird langsamer gerendert.

Aber die Dropdown-Option lässt die Website einfach aussehen; Selbst bei einer Liste mit 50 Ländern wissen Benutzer nicht einmal, dass eine solche Liste in die Website eingebettet ist, bis sie auf die Option klicken.

Es hilft Benutzern auch, die gewünschte Option genau auszuwählen. Sie könnten ihre Option auch schneller auswählen, da das Dropdown-Menü eine alphabetische Verknüpfung ermöglicht.

Die Flexibilität des React-Frameworks bietet uns verschiedene, aber erstklassige Methoden, um dies durchzuführen. Lassen Sie uns einige dieser Methoden verdauen.

Aktualisieren Array-Werte in React useState Hook mit useEffect

Wenn wir die Funktion useEffect in React anwenden, hilft sie beim Übergang des Zustands unserer Komponente von ihrem ursprünglichen Zustand in einen anderen Zustand.

Wenn in diesem Beispiel die Seite gerendert wird, ist dies der ursprüngliche Zustand der gerenderten Komponente. Wenn wir dann klicken, um ein Element aus der Dropdown-Liste auszuwählen, hat sich die Komponente in einen anderen Zustand bewegt; das ist die Arbeit von useEffect.

Jetzt werden wir zur Datei index.js unseres Projektordners wechseln und diese Codes schreiben:

Codeschnipsel - 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);

Ausgabe:

Dieses Beispiel zeigt, dass die Originalseite gerendert wird und Status auswählen anzeigt. Die Listen in der Dropdown-Liste sind die neuen Zustände, die die Komponente durchlaufen soll.

Dort definieren wir dann diese Anweisung, wenn wir den useEffect zuweisen, um den Zustand des Werts des allowedState-Arrays zu setzen.

Aktualisieren Array-Werte in React useState Hook mit dem onClick Event

Diese Methode verwendet den Event-Listener onClick, um die Komponente von ihrem Anfangszustand Choose One in einen neuen Zustand zu versetzen.

Zunächst müssen wir im Ordner src unseres Projektordners eine neue Datei Dropdown.js erstellen. Hier definieren wir die Funktion des Event-Listeners onClick.

Wir öffnen dann die Datei Dropdown.js in unserem Editor und schreiben einige Codes:

Codeschnipsel - 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;

In dem Moment, in dem wir auf das Dropdown klicken, wird der onClick aktiv und greift sofort auf die option-Komponente zu, die wir dem Event-Listener zugeordnet haben.

Als nächstes müssen wir die Datei Dropdown.js in die App.js unseres Projektordners importieren, damit sie gerendert werden kann.

Codeausschnitt - 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>
  );
}

Ausgabe:

Hier haben wir Dropdown importiert und den Anfangszustand unserer Komponente auf Choose One gesetzt. Dies aktualisiert der Event-Listener onClick, wenn er aktiv wird.

Dann packen wir das Dropdown in das App-Div, damit es gerendert werden kann.

Aktualisieren Sie Array-Werte in React useState Hook mit Mausereignissen

Diese Methode sorgt dafür, dass unsere Web-App elegant aussieht und funktioniert. Der Benutzer muss nur mit der Maus über das Dropdown-Menü fahren, und die Liste wird angezeigt.

In diesem Beispiel wenden wir die Ereignisse onMouseEnter und onMouseLeave an. Nachdem wir einen neuen Projektordner erstellt haben, erstellen wir zwei Dateien im Ordner src: dropdown.js und dropdown.css.

In die Datei dropdown.js schreiben wir diese Codes:

Codeausschnitt - 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;

Wir haben die Mausereignisse in dieser Datei als onMouseEnter deklariert, und wir haben erklärt, dass sie die Elemente in der Dropdown-Liste anzeigt, indem wir das Ereignis showDropdown zugewiesen haben. Das Gleiche haben wir mit onMouseLeave gemacht, sodass die aufgelisteten Elemente ausgeblendet werden, sobald wir die Maus vom Dropdown-Menü wegbewegen.

Dann müssen wir Dropdown in die Datei App.js importieren und es in das Div App packen. Dadurch wird unsere Komponente gerendert.

Codeschnipsel - App.js:

import React from 'react';
import Dropdown from './Dropdown';

function App() {
    return (
        <div>
            <Dropdown/>
        </div>
    )
}

Um einige Stile auf der Webseite zu erstellen, können wir das folgende CSS anwenden:

.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;
}

Ausgabe:

Fazit

Es besteht kein Zweifel an der Bedeutung und Effektivität der Verwendung der Dropdown-Funktion in React. Ein gut gestaltetes Dropdown-Menü macht unsere Web-App optisch ansprechend, während sie mit optimaler Geschwindigkeit geladen wird, da die Inhalte im Dropdown-Menü nicht auf der Webseite geladen, sondern hinter einer Funktion versteckt werden.