在React中使用map()和onClick()时切换特定项，而不切换其他项
在React中使用map()和onClick()时切换特定项，而不切换其他项，你可以通过以下步骤实现：
- 首先，在React组件的state中定义一个变量来跟踪当前选中的项。例如，你可以使用useState()钩子来创建一个名为selectedItem的状态变量，并将其初始值设置为null。
- 首先，在React组件的state中定义一个变量来跟踪当前选中的项。例如，你可以使用useState()钩子来创建一个名为selectedItem的状态变量，并将其初始值设置为null。
- 接下来，在你的组件中使用map()方法遍历列表数据，并为每个列表项创建一个元素。对于每个元素，你可以设置一个onClick事件处理程序，并在点击时更新selectedItem的状态。
- 接下来，在你的组件中使用map()方法遍历列表数据，并为每个列表项创建一个元素。对于每个元素，你可以设置一个onClick事件处理程序，并在点击时更新selectedItem的状态。
- 在上面的代码中，我们根据selectedItem的值为选中的项添加一个active类名，以便在样式表中进行样式设置。你可以根据需要自定义类名和样式。
- 最后，你可以根据selectedItem的值来执行特定的操作或渲染不同的内容。例如，你可以根据选中的项显示其他相关信息或触发其他事件。
- 最后，你可以根据selectedItem的值来执行特定的操作或渲染不同的内容。例如，你可以根据选中的项显示其他相关信息或触发其他事件。
以上是在React中使用map()和onClick()切换特定项而不切换其他项的基本实现方式。请注意，这只是一种示例，你可以根据实际需求进行修改和扩展。在实际开发中，你可能还需要处理键盘导航、无障碍性等方面的问题，以提供更好的用户体验。
在腾讯云产品中，与React开发相关的推荐产品是腾讯云的云开发（Tencent CloudBase）。云开发提供了一套全栈化的解决方案，包括云函数、数据库、存储和托管等服务，可以帮助开发者更便捷地进行前端开发。你可以在腾讯云云开发的官方文档中了解更多信息：腾讯云云开发
相关·内容
我将每个国家放在不同的卡片上，我希望卡片在正面显示国家的名称，然后翻到背面，并在用户单击卡片时显示国家的大陆和语言。问题是，当用户单击卡片时，所有的卡片都会翻转。我现在意识到我需要使用id或类似于目标特定卡片的东西，但我不知道如何使用。我尝试了什么:在这里和其他地方有这个问题的各种版本，但通常代码要长得多，很难遵循建议，其中一些涉及更改CSS或与我正在尝试做的不同的情况。我试图创建一个状态为'clickedArray‘的数组，如果单击了任何特定的索引，就会显示
浏览 30提问于2021-08-01得票数 1
回答已采纳
我正在尝试使用map函数内部的切换。我以为我有，但很明显我的逻辑有问题。当我单击地图中的一些切换项时，我必须单击它们两次才能看到更改。当我将一项切换为true，然后立即将另一项切换为true时，似乎就会发生这种情况。提前感谢您的帮助。这是CodeSandbox：https://codesandbox.io/s/nice-hertz-srgew 和代码： imp
浏览 22提问于2021-11-20得票数 0
我有一个火锅箭头切换在几个按钮，我试图让他们切换。开关是工作的，但他们都在同时切换。如何将其与单击的组件隔离？'active' : 'inactive'} onClick ={this.toggleState}>{this.state.isActive ?'active
浏览 1提问于2017-05-24得票数 0
回答已采纳
我正在尝试测试一个功能，如果您有一个属性为aria-checked的li列表，单击其中一个会将其切换到true，而将li's aria的其余部分切换为false。我在下面实现了它： constructor(props){ this.statethis.setState({ }, () =>
浏览 0提问于2018-04-16得票数 1
4回答
我有一个使用array.map呈现组件的javascript数组。我将此数组切换为es6映射，以便能够使用键-值对更容易地查找项，并在Map上从.map切换为forEach。在forEach内部，我调用了一个返回React组件的render方法，但它没有被呈现。如何在forEach中呈现组件 {
浏览 3提问于2016-02-24得票数 19
2回答
在我的应用程序中，我只想坚持两个还原器--其中一个是cart.reducer，在购物车减缩器中，我有两个值，其中一个控制购物车下拉列表是否应该隐藏或显示给用户，另一个是用户添加到购物车中的项，当我试图持久化这个购物车减法器时，这两个属性都持久化了，所以当用户离开打开的页面时，在重新打开购物车后，购物车下拉框仍然打开。
浏览 5提问于2022-05-21得票数 0
在我的React应用程序中，我有一个搜索栏和ExpansionPanel (或手风琴)。我有一个使用ExpansionPanel按类别分组的项目列表。用户可以切换每个组的选择以及单个项。用户还可以使用搜索栏搜索项目。我希望展开组的ExpansionPanel (1)，如果组的状态被检查，或者如果组未被选中，则扩展(2)，但是有一些项与搜索文本匹配。以下是代码的简要摘要。到目前为止，我只能使用defaultExpand
浏览 3提问于2022-08-07得票数 0
2回答
我有一个简单的学习React应用程序，我在其中映射一个数组，并根据该数组中的项创建一些单独的卡片。. ",];
import React from "react";
}; const listItems = this.props.list.<
浏览 9提问于2020-05-16得票数 0
回答已采纳
2回答
isdone: '', currentItem: {text:'', key:''}, this.state.items.map(item => {
浏览 12提问于2019-08-30得票数 2
回答已采纳
2回答
我想得到一个显示和隐藏数组项目的基础上的切换。当我单击第一项时，它将被展开，当我单击第二项时，第二项将被展开，而前一项将被隐藏。this.state.show, }
return ( {[1, 2,3].map((item) => (
浏览 10提问于2021-12-09得票数 -1
1回答
我有一个培训者的列表，我必须选择和取消选择作为一个切换按钮。下面是这样做的代码，但我不知道如何正确地实现它。<button onClick={() => setBtnToggle(!addBtnToggle)}>Selected</button> : <button onClick={() => setBtnToggle(!console.log(result) return null
浏览 3提问于2022-04-25得票数 1
回答已采纳
1回答
我只想切换最后一个span元素，它写着"text to toggle {user.id}"，我只想为这个特定的li元素切换这个元素，而不是所有li元素。目前我是如何设置的，由于state是如何工作的，它将为所有li元素切换span元素。我正在考虑通过map函数传递一个索引，并引用这个索引来切换我想要的元素，但是我怎么做呢？因为状态是为所有li元素设置的，是否有更好的方法来完成这个任务，而不是使用状态呢？
我知道，<
浏览 7提问于2022-05-08得票数 1
回答已采纳
在特定组件之外的标记上切换类的正确的React方法是什么？首先，我使用document.body.classList.toggle而不是useState变量。我知道当在这个头组件中切换一个类时，我会使用useState而不是useEffect。但是，当我需要在组件外部切换某些类时，就像我的例子一样，单独使用useState可以吗？其次，我是否应该在useEffec
浏览 41提问于2021-05-04得票数 0
在我的React Native项目中，我使用了Switch组件。它可以通过按下它直接切换，但我也想让用户通过按下附近的相关项来更改它。当按下时，它当然会以动画方式切换，但当我使用setState()更改它的状态时，它只是直接跳到其他位置，而不是动画。
有没有一种方法可以在代码中更改动画的状态时以编程方式触发动画？
浏览 2提问于2017-09-25得票数 3
我想在单击图像地图区域时触发Bootstrap accordion的切换功能。问题是它的行为很奇怪。当我第一次点击某个区域时，所有的手风琴元素都会显示出来，然后在第二次点击时，所有的元素都会折叠起来，最后在第三次点击时，它会像预期的那样工作。我已经在jsfiddle ()上创建了示例。www.vero.at/themes/vero/images/en/Leistungsspektrum.jpg"
浏览 2提问于2013-07-11得票数 8
回答已采纳
tl;dr:我正在使用为我的应用程序做一个交互式的网格布局。对于网格()中的所有项目，我有一个按钮可以在非静态(可拖动和调整大小)和静态(非交互)模式之间切换。我是用useState和的技
浏览 2提问于2020-10-29得票数 0
回答已采纳
我有一个.map()函数，在其中迭代数组和呈现元素，如下所示： <TachyonsSimpleSelectOptionoptions={options[i]} onClick={() => this.isSelected(i)}this.state.selected }, () => { console.log(this.state.selected) })
浏览 0提问于2018-03-14得票数 5
回答已采纳
使用React，当我们呈现一个项目列表，然后将一个项插入到该列表中时，新插入的项不会触发componentDidMount。={() => this.prependItem()}>+</button> return (<Itemkey={index} i={index}/>) &
浏览 0提问于2019-07-25得票数 0
回答已采纳
在中，我有几个带有onClick事件的list元素，它们都调用相同的函数。<ul> <li onClick);">4</li>
<li onClick="Javascript:show(t
浏览 3提问于2014-04-28得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
