在 React useState Hook 中更新数组值

Oluwafisayo Oluwatayo 2024年2月15日
  1. 使用 useEffect 更新 React useState Hook 中的数组值
  2. 使用 onClick 事件更新 React useState 挂钩中的数组值
  3. 使用鼠标事件更新 React useState 钩子中的数组值
  4. 结论
在 React useState Hook 中更新数组值

对于希望在其 Web 应用程序上创建可供客户选择的扩展选项列表的程序员,使用下拉菜单是最有效的方法之一。如果我们希望客户从 10 个国家/地区的列表中进行选择并使用单选按钮选项,它将使网站看起来拥挤并且渲染速度变慢。

但是下拉选项使网站看起来很简单;即使对于 50 个国家/地区的列表,用户在单击该选项之前甚至都不知道网站上嵌入了这样的列表。

它还可以帮助用户准确地选择他们想要的选项。他们还可以更快地选择他们的选项,因为下拉菜单允许按字母顺序排列。

React 框架的灵活性为我们提供了不同但一流的方法来执行此操作。让我们消化其中的一些方法。

使用 useEffect 更新 React useState Hook 中的数组值

当我们在 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 输出 React useState 数组

此示例显示原始页面已呈现并显示 Select a State。下拉列表中的列表是我们希望组件通过的新状态。

这就是我们在分配 useEffect 以设置 allowedState 数组的值的状态时定义该指令的地方。

使用 onClick 事件更新 React useState 挂钩中的数组值

此方法利用 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>
  );
}

输出:

使用 onClick 事件输出 React useState 数组

在这里,我们导入了 Dropdown 并将我们组件的初始状态设置为 Choose One。这是 onClick 事件侦听器在激活时更新的内容。

然后我们将 Dropdown 包裹在 App div 中,以便它可以被渲染。

使用鼠标事件更新 React useState 钩子中的数组值

这种方法使我们的 Web 应用程序以时尚的方式外观和运行。用户只需将鼠标悬停在下拉菜单上,就会显示列表。

在本例中,我们将应用 onMouseEnteronMouseLeave 事件。创建一个新的项目文件夹后,我们将在 src 文件夹中创建两个文件:dropdown.jsdropdown.css

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

要在网页上创建一些样式,我们可以应用以下 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 useState 阵列输出

结论

毫无疑问,在 React 中使用下拉功能的重要性和有效性。精心设计的下拉菜单使我们的 Web 应用程序在以最佳速度加载时令人赏心悦目,因为下拉菜单中的内容并未加载到网页上,而是隐藏在函数后面。

Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

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

相关文章 - React Hooks