使用react Hooks的级联下拉菜单
级联下拉菜单是一种常见的前端交互组件，它可以实现多级菜单之间的关联和选择。使用react Hooks可以更方便地实现级联下拉菜单的功能。
React Hooks是React 16.8版本引入的一种新的特性，它可以让我们在无需编写类组件的情况下，使用状态和其他React特性。在级联下拉菜单中，我们可以使用useState Hook来管理菜单的选中状态。
具体实现级联下拉菜单的步骤如下：
- 定义菜单数据：根据业务需求，定义好菜单的数据结构，包括每个菜单项的值和显示文本。可以使用数组或对象来表示。
- 使用useState Hook定义选中状态：使用useState Hook定义一个状态变量，用于保存每个级别菜单的选中项。初始值可以设置为默认选中项或空值。
- 渲染级联下拉菜单：使用JSX语法，根据菜单数据和选中状态，渲染出级联下拉菜单的各个级别。可以使用map函数遍历菜单数据，生成对应的下拉选项。
- 监听菜单选择事件：为每个下拉菜单添加onChange事件监听，当选择项发生变化时，更新对应级别的选中状态。
- 更新下级菜单：根据当前级别菜单的选中项，动态生成下一级菜单的数据。可以使用filter函数过滤出符合条件的下级菜单数据。
- 重置下级菜单：当上级菜单的选中项发生变化时，需要重置下级菜单的选中状态和数据，确保级联关系正确。
级联下拉菜单的优势在于可以提供更好的用户体验和交互效果，用户可以方便地选择多级菜单项，减少了繁琐的页面跳转和操作。它常用于省市区选择、商品分类筛选等场景。
腾讯云提供了丰富的云计算产品和服务，其中与前端开发相关的产品包括云服务器、云存储、云函数等。具体可以参考腾讯云官网的产品介绍页面：腾讯云产品介绍
以上是关于使用react Hooks的级联下拉菜单的完善且全面的答案。
相关·内容
我正在使用React和Redux为下拉菜单构建一个动态子菜单。计划是，当用户单击下拉菜单时，将进行API调用，并根据API的响应创建一个子菜单。这是我的下拉菜单文件
MainMenu.js
import React, {useEffect} from 'react'
import CreateSubMenu from './utils/CreateSubMenu.js'
import fetchSubMenuData from './actions/submenuAction.js'
function getSubMenu(menu, leve
浏览 4提问于2021-04-16得票数 1
回答已采纳
我是react native的新手，我正在尝试使用react picker显示下拉菜单
我可以成功地显示标签，问题是每次我选择项目时，它总是返回到第一个选项。这是我的代码
import React, { useState, useEffect } from 'react';
import { Text, TextInput, StyleSheet, View, Button, Picker } from 'react-native';
import NewsPost from '../hooks/NewsPost'
import Categori
浏览 6提问于2020-02-08得票数 0
回答已采纳
我目前正在尝试修改我的Gatsby站点上的下拉菜单组件，以便它将布尔值报告给它的父组件导航栏。我计划使用这个布尔值在情绪中触发一些条件CSS。 布尔值isOpen报告下拉菜单是否打开，因此true表示它是打开的，false表示它没有打开。 到目前为止，我正在使用React Hooks将数据从子组件传递到父组件。看起来我成功地传递了数据，但是当我单击下拉菜单时，它会快速连续地发送true和false布尔值，即使菜单仍然打开。 如何修改此代码，以便将子组件中的isOpen正确报告给父组件？ import React, { useState, useEffect } from "react
浏览 17提问于2020-04-24得票数 0
我是否正确地说，不可能使用 eslint插件与tslint？
我尝试将它添加到我的tslint.json中：
"plugins": ["react-hooks"],
"rules: {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
但是，我在控制台中看到了以下错误：
Could not find implementations for the following rules
浏览 0提问于2019-02-23得票数 2
回答已采纳
我知道我可以禁用该文件或禁用该行，但我现在想要全局地这样做，这样我就不必在每次想要使用useEffect作为componentDidMount()时都写入它。 我试过了： {
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "off"/0, // tried each
"react-hooks/exhaustive-deps"
浏览 369提问于2020-09-20得票数 4
以下是我的代码 import React, { FC, useState,useMemo } from "react";
const FormSearch: FC<{ params: string }> = ({
params
}) => {
const [category, useCategory] = useState<string>("All");
const [search, setSearch] = useState<string>("");
useMemo(() =&g
浏览 31提问于2019-06-07得票数 7
我有以下虚拟项目，其中包含下拉菜单：
(用“+”单击左上角按钮)
以下是：src\components\header\header.jsx的源代码。
import React from 'react';
import './header.scss'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
class Header extends React.Component {
constructor(props) {
super(prop
浏览 2提问于2019-10-29得票数 0
我试图获得react-hooks规则，但它似乎不适用于我的设置(VSCode，CRA，airbnb，tslint，更漂亮)。
这是我的.eslintrc.json在崩溃前的情况：
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": ["plugin:react/recommended", "airbnb", "prettier"],
"g
浏览 0提问于2020-04-29得票数 0
回答已采纳
我是react的初学者。我正在尝试使用react-hooks将数据库的值从一个文件发送到另一个文件，并得到以下错误，有人能帮助我吗？
第5:41行:不能在顶层调用React Hook "useState“。React Hooks必须在React函数组件或自定义React Hook函数react-hooks/rules-of-hooks代码中调用：
import React, {useState, useEffect} from "react";
import Axios from "axios";
const [collegeList, setcol
浏览 47提问于2021-05-18得票数 0
嗨，开发人员，我只是React.js的初学者。我试着把道具从父母传给孩子。
这是app.js文件
import React from "react";
import Hooks from "./components/ReactHooks1";
import Hooks2 from "./components/ReactHooks2";
const App = () => {
return (
<div>
<h1>
浏览 10提问于2022-05-13得票数 2
在react 17中不一定使用
import React from 'react';
但是如果我没有它，所以eslint给了我错误
'React' must be in scope when using JSX react/react-in-jsx-scope
你知道如何修改.eslintrc.js吗？
module.exports = {
parser: "babel-eslint",
env: {
browser: true,
node: true,
es6: true,
jest: true,
}
浏览 1提问于2020-11-02得票数 20
回答已采纳
当我把它放在我的.eslintrc.json中时，“redux/useSelector-偏好-选择器”的规则没有得到遵守，但是其他的规则是。但是，当我
/* eslint react-redux/useSelector-prefer-selectors: "off" */
在违规文件的顶部，错误会消失。
我的.eslintrc.json文件(在根目录中)：
{
"env": {
"browser": true,
"commonjs": true,
"es2020": true,
浏览 6提问于2022-02-11得票数 0
回答已采纳
1回答
我在使用usestate()钩子进行状态操作后遇到问题。
无法编译错误：
./src/App.js
Line 6:43: React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Line 14:39: React Hook "useState" is called in functio
浏览 13提问于2020-03-05得票数 0
我使用的是VSCode，当我将行'react-hooks/exhaustive-deps': 'warn'添加到我的.eslintrc.js中时，会在ESLint输出中得到以下内容：
Rules with suggestions must set the `meta.hasSuggestions` property to `true`. Occurred while linting
C:\Users\filepath.jsx:72 Rule: "react-hooks/exhaustive-deps"
这就破坏了所有其他的皮毛。我尝试在我的.es
浏览 4提问于2021-10-15得票数 37
回答已采纳
import React, { useState } from "react";
import { Redirect } from "react-router-dom";
function Update(data) {
if(!data.location.state) return <Redirect to="/"/>
const [name, setName] = useState(data.location.state.name);
return (<
浏览 1提问于2021-06-12得票数 0
2回答
我用的是react-hooks。因此，有一个模式，它弹出一堆输入(组件)，如文本字段，下拉菜单，日期选择器等。问题是当某个字段被编辑时，我所有的表单组件都会被重新渲染，这会使我的表单变得非常慢。我完全理解为什么会这样。但是，当我在表单中编辑一些输入时，我希望找到一种方法，所有其他输入字段(组件)都应该保持“冻结”状态，并且不会重新呈现。否则，使用至少有20个输入域的表单将使工作变得非常缓慢…… 非常感谢您的帮助！
浏览 14提问于2019-04-21得票数 0
我正在使用react 16.8和eslint - .When -react- hooks 1.6.0插件，我有条件地使用钩子，我希望eslint会警告我。下面是我的配置：
"eslintConfig": {
"parser": "babel-eslint",
"plugins": [
"react-hooks"
],
"rules": {
"react-hooks/rules-of-hooks": "error"
浏览 0提问于2019-04-28得票数 15
我正在尝试使用jest.spyOn()代替jest.mock进行测试，因为mock的返回值不能进行类型检查。但是，当我使用它时，我得到以下错误：
TypeError: Cannot set property useGame of #<Object> which has only a getter
> 3 | const STATE_SPY = jest.spyOn(hooks, "useGame");
| ^
at ModuleMockerClass.spyOn (node_modules/jest-mo
浏览 27提问于2020-07-30得票数 1
我有这个组件：
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import inputAction from '../../redux/actions/inputActions';
import clienteActions from '../../redux/actions/clientesAction';
const clientes = () => {
const dispatch = u
浏览 1提问于2021-04-03得票数 2
在这里你可以看到我有一个非常简单的react组件，但是eslint规则给了我一个假阳性。 ? 配置详细信息 package.json "devDependencies": {
"eslint": "^5.13.0",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^1.0.1",
} .eslintrc.js module.exports = {
"en
浏览 19提问于2019-02-13得票数 0
1回答
如何启用Gatsby中的react钩子/详尽-deps警告？我的问题是关于盖茨比项目，我在反应项目方面没有问题。
我知道eslint-plugin-react-hooks是installed.In --我的.eslintrc文件--我添加了这些更改，但无法工作。
在rules中我添加了"react-hooks/exhaustive-deps": "warn",
在plugins中我添加了"react-hooks",
浏览 4提问于2022-06-20得票数 -1
回答已采纳
我想在我的.eslintrc.json文件中启用对“默认”typescript命名约定的警告。您如何做到这一点？
//package.json
//...
"@typescript-eslint/eslint-plugin": "^4.25.0",
"@typescript-eslint/parser": "^4.25.0",
"easy-peasy": "^5.0.3",
"eslint-plugin-react": "^7.23.2
浏览 30提问于2021-05-28得票数 0
回答已采纳
1回答
如何删除分号规则？
我试过取消半规则，但我不会成功的。当我保存文件时，一旦它删除了分号，lint就会抱怨它丢失了，而当我插入它时，它会再次抱怨说要删除。
我想保留分号
这是我的.prettierrc文件：
{
"printWidth": 100,
"singleQuote": true,
"tabWidth": 4,
"trailingComma": "es5",
"endOfLine":"auto",
"semi": true
}
浏览 15提问于2022-04-26得票数 3
我正在尝试将"class component“转换为"react hooks”
这是“类组件”的代码：，它正在工作，但当我们点击“提交按钮”时，会出现一个警告。
下面是我想要转换成"react hooks“的代码：
问题出在下面这一行：
form onSubmit={this.handleSubmit}
我如何使用react-hooks修复它呢？
浏览 1提问于2019-04-30得票数 0
我希望根据用户单击的内容动态呈现组件。我试过这样的方法：
function ComponentTest() {
const [component, setComponent] = useState<ReactNode | null>(null);
return <button onClick={() => setComponent(SomeFunctionalComponent)}>Crash</button>
}
在本例中，我显然没有对状态做任何事情，但是单击此按钮会导致应用程序崩溃，产生以下错误消息：
Warning: Do n
浏览 7提问于2022-04-12得票数 0
回答已采纳
我试着用React Hooks让异步等待if条件。下面的代码是在我试图让它成为React Hooks之前的代码：
<code>A0</code>
我试着把它放进React Hooks
<code>A1</code>
我还试图在我的jsx中调用它，如下所示：
<code>A2</code>
它没有工作，我写错了吗？
浏览 11提问于2020-07-30得票数 0
刚把react从v16更新到v17，得到了错误，编译失败。 Line 37:9: React Hook "Api.useAuth" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks
Line 47:9: React Hook &
浏览 31提问于2021-01-20得票数 0
回答已采纳
当我在后台收到通知时，我尝试用apollo-hooks和react-native-firebase从服务器获取数据。
我创建了新的函数和registerHeadlessTask。
但它发生在Hooks can only be called inside the body of a function component.上
react-native: 0.59.8 react-native-firebase: 5.5.6 react-apollo-hooks: 0.4.5
我尝试使用react-apollo-hooks获取数据，但出现错误。而且，我得到了另一个上下文的自定义钩子，它也发生了Hoo
浏览 2提问于2019-08-29得票数 1
1回答
你好，我正在尝试在Gatsby中使用chart js。我目前正在学习在react中使用chart js的教程，我不确定问题是不是他使用的是creat-react-app，而不是Gatsby，但错误似乎并没有表明这一点。 首先，我安装了以下软件： npm i --save react-chartjs-2 然后 npm i --save chart.js chartData.js： import React, {useState, useEffect } from "react";
import { Line } from "react-chartjs-2";
浏览 13提问于2020-06-19得票数 0
回答已采纳
我更新了我的Eslint规则使用airbnb在我的反应类型成绩单项目。
我的项目不使用“create app”。所以我必须扩展airbnb，因为我也在使用和扩展airbnb-typescript。
eslint-plugin-react和eslint-plugin-react-hooks是eslint-config-airbnb的对等依赖关系。那么我需要扩展plugin:react/recommended'吗？
我在extend属性eslintrc.js中有这样的内容：
extends: [
'airbnb',
'airbnb-typescrip
浏览 3提问于2022-07-05得票数 0
1回答
我尝试在Gatsby的react类组件中使用静态查询。 import * as React from "react"
import '../styles/layout.scss'
import Layout from '../components/layout'
import { useStaticQuery, graphql } from 'gatsby'
import { container } from '../styles/mystyles.module.scss'
浏览 29提问于2021-03-31得票数 0
回答已采纳
1回答
我刚开始使用react组件，在使用react时会遇到这个错误，这是我的代码，有人能帮我吗？这是错误的细节。
这种情况的发生有以下原因之一：
您可能有React的不匹配版本，而呈现程序(如React )您可能违反了Hooks的规则，您可能在同一应用程序中有多个React副本，参见中有关如何调试和修复此问题的提示。
const newParams = "params"
// eslint-disable-next-line react-hooks/rules-of-hooks
const history = useHistory();
// eslint-disable-next
浏览 5提问于2022-01-31得票数 0
回答已采纳
我有一个包含以下规则的.eslintrc文件：
"rules": {
"prettier/prettier": "error",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "error",
"no-console": "warn"
},
我安装了：eslint-plugin-prettier，eslint-config-pr
浏览 10提问于2022-02-10得票数 3
我有按钮点击系统和它的工作。
function clickCreate(msg){
console.log(msg);
}
const CreateButton = (props) =>{
return(
<div>
<i onClick = {() => clickCreate("test")} id="createBtn" className="fas fa-5x fa-microphone-alt"></i>
</div>
);
}
现在，我
浏览 4提问于2021-01-09得票数 0
回答已采纳
这个问题与eslint-plugin-react-hooks有关。
当我在CodeSanbox中使用React时，我可以使用props对象的单个属性作为useEffect钩子的依赖项：
示例1：
useEffect(()=>{
console.log('Running useEffect...');
console.log(typeof(props.myProp)); // USING ONLY 'myProp' PROPERTY
},[ ]); // EMPTY ARRAY
示
浏览 2提问于2019-07-31得票数 2
我正要用React-Redux开始一个项目。对于API引用，有Hooks和connect()。因此，Hooks是连接API的替代。使用钩子或连接到我的React-Redux项目有什么不同？
浏览 0提问于2019-09-20得票数 16
这一问题：
ESLint发出了一个VSCode中的"X被赋值但从未使用.eslint(无未使用的-vars)“错误：
no-unused-vars规则
但是在这个jsx部分中引用了变量：
我添加了一些规则，当涉及到JSX：(.eslintrc.json部件)时，应该告诉eslint正确的行为。
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:import/errors",
浏览 2提问于2020-05-26得票数 1
回答已采纳
我有一个带有useEffect钩子的react组件，如下所示：
const LocationEditor: React.FC<SectionEditorProps> = (props) => {
const [section, setSection] = useState({...(props.section as Location)});
useEffect(() => {
props.onChange(section);
}, [section]);
当我运行这个项目时，我得到了这样的警告：
React Hook useEffect has a missin
浏览 2提问于2021-01-13得票数 5
我试图将eslint-plugin-testing library添加到一个项目中，以捕获@testing-library/react测试中常见的错误。我已经跟踪了，但是我无法让它捕获测试文件中的错误。
例如，我手动打开no-debug规则，在一个.test.tsx文件中添加一个debug()语句，然后运行linter。它不会捕获文件中的任何错误。
如果我打破了其他插件的规则，它们就会被捕获，所以我怀疑我在配置中添加测试库插件的方式可能有问题。
package.json
{
"dependencies": {
"react": "16.12.
浏览 3提问于2020-05-15得票数 3
回答已采纳
ESLint不会在未使用的变量上警告我，也不会在未导入的组件上发出警告。我尝试了所有的帖子，但我没有任何解决方案:/ 免责声明:我知道我没有为example....Why导入导航栏ESLint没有警告我吗？谢谢！ .eslintrc.json {
"env": {
"browser": true,
"es2020": true,
"node": true,
"jest": true
},
"extends"
浏览 159提问于2021-04-26得票数 1
1回答
猫鼬分类
、、
我有这样的原始文章集：
{
title: "how javascript closure works?",
tag: "JS"
},
{
title: "react hooks exploration",
tag: "React"
},
{
title: "Prototype link in Javascript",
tag: "JS"
},
{
title: "Component lifecircle in React",
tag: "Rea
浏览 3提问于2022-01-10得票数 -1
回答已采纳
我正在使用Firebase Cloud Functions托管我的SSR Nextjs应用程序。我可以在firebase云函数上部署Nextjs应用程序，并在没有React Hooks的情况下通过干净的URL访问它，但使用React Hooks时，我会收到一条错误消息：
Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1.
浏览 0提问于2019-10-19得票数 9
1回答
制作一个视频游戏剪辑发布应用程序。我有一个控制器在后端，这将给我的剪辑的顺序，大多数评论剪辑到最少。我希望在数据正常排序之间进行切换，通过使用select标记(稍后我将添加更多过滤器)从大多数到最少的注释。我希望能够根据select标记onChange中的状态有条件地呈现这两个获取，但是我得到了一个错误。
Line 18:5: React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render
浏览 10提问于2022-05-24得票数 0
回答已采纳
我想让data!.id
错误：
警告禁止非空断言@typescript-eslint/no-null断言
当前配置：
module.exports = {
parser: '@typescript-eslint/parser',
extends: [
'eslint:recommended',
'plugin:jsx-a11y/recommended',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescr
浏览 2提问于2020-02-20得票数 32
回答已采纳
1回答
用Jest模拟库钩子
、、、
设置 我在我的一个组件中使用了一个名为react-firebase-hooks的库。 // Component.tsx
import React, {useEffect} from 'react';
import { Firebase } from '../firebase/firebase';
import { useAuthState } from 'react-firebase-hooks/auth';
export const Component = () => {
// Note that Firebase.getAut
浏览 22提问于2021-02-07得票数 0
回答已采纳
昨天我安装了一个npm的dexie和dexie-react-hooks。package-lock.json显示dexie 3.0.3和dexie-react-hooks 1.0.7 使用模板"cra- template -pwa“创建了一个react应用 使用Dexie网站上的文档进行基本的Dexie DB和useLiveQuery，并在React中创建了这个简单的应用程序组件。 import React from 'react';
import Dexie from 'dexie'
import { useLiveQuery } from '
浏览 67提问于2021-10-22得票数 1
回答已采纳
我希望对我的PascalCase项目中JSX.Element类型的变量强制使用React+Typescript。我经常使用以下模式来创建功能组件，并且我喜欢通过给它一个PascalCase名称来区分我的同名导出：
//MyComponent.tsx
//PascalCase for MyComponent
export const MyComponent= (): JSX.Element =>{
return (
<div>
My Component
</div>
)
}
export default MyComponen
浏览 2提问于2021-06-02得票数 3
回答已采纳
我安装了@apollo/react-components，以便在react项目中使用ApolloProvider，这会导致以下错误：
找不到./node_modules/@apollo/react-hooks/lib/react-hooks.esm.js模块:无法解析“ -client”
浏览 2提问于2020-06-07得票数 1
回答已采纳
浏览器内存中有三个数组：
学生= [{studentID: x, firstName: x, lastName: x},{...}, {...}]
教师= [{teacherName: x},{...}, {...}]
倍= [{teacher: x, start: x, end: x},{...}, {...}]
我要做的是：
呈现学生下拉菜单。
在选择学生时，呈现该学生的教师的下拉菜单
选择教师时，呈现该教师可用时隙的下拉菜单。
我可以使用backbone.js创建这三种模型、集合和视图，但我不能“连接”它们。我如何在学生的内心里嵌套老师的时间？还是有更好的方法？
请记
浏览 0提问于2013-06-03得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
