从React onClick中的数组中删除当前索引
，可以通过以下步骤实现：
- 首先，创建一个状态变量来存储数组。使用React的useState钩子来创建一个数组状态变量，并将初始值设置为包含所需元素的数组。
const [array, setArray] = useState(['item1', 'item2', 'item3']);- 在React组件中，创建一个处理点击事件的函数。该函数将接收要删除的索引作为参数，并使用数组的filter方法来创建一个新的数组，其中排除了指定索引的元素。
const handleDelete = (index) => {
setArray(prevArray => prevArray.filter((_, i) => i !== index));
};- 在组件的JSX中，使用map方法遍历数组并渲染每个元素。为每个元素添加一个点击事件处理程序，将其索引作为参数传递给handleDelete函数。
return (
<div>
{array.map((item, index) => (
<div key={index}>
{item}
<button onClick={() => handleDelete(index)}>删除</button>
</div>
))}
</div>
);这样，当用户点击删除按钮时，handleDelete函数将被调用，并从数组中删除相应的元素。React将自动重新渲染组件以反映更新后的数组。
对于这个问题，腾讯云没有特定的产品或链接地址与之相关。
相关·内容
1回答
当组件的内容发生更改时，状态不清除
reactjs
我正在循环基于许多数组创建的几个组件。当我单击delete时，这会减少数组的数量，从而减少组件的数量。
FooList.tsx
import React, { useState } from "react";
const FooList = props => {
const [number, setNumber] = useState("");
const deleteArray = () => {
// Remove the component that was clicked
props.setArray(prev =
浏览 3提问于2019-10-06得票数 1
回答已采纳
1回答
如何从子组件ReactJS更新父状态
javascript、arrays、reactjs
我想要做的是，当我按下delete时，我想通过传递小于value的1的子值来删除最后一个按钮，然后再次通过地图进行重新渲染 export default function App() {
const [value, setValue] = useState(2);
return (
<div>
<ChildComponent value={value} setValue={setValue} />
</div>
);
}
export con
浏览 15提问于2021-03-27得票数 0
1回答
从表reactjs中移除元素
javascript、reactjs、html-table、use-effect、use-state
我已经创建了表，并且我有不同类型的元素要添加。添加元素后，我希望通过单击remove按钮来删除一个特定的元素。
import * as React from 'react';
import { useState } from 'react';
import { Table } from 'reactstrap';
import { Button } from 'reactstrap';
export default function App() {
let [myArray, updateMyArray] = useStat
浏览 2提问于2022-08-23得票数 0
回答已采纳
1回答
React未呈现新状态
reactjs、react-hooks
我正在尝试学习新的React钩子。我已经编写了一个简单的todolist，用户可以输入输入来创建新的待办事项，然后单击待办事项将其删除。但是，在删除待办事项后，它不会重新呈现。
以下是我的代码
import React, { useState, Fragment } from "react";
const Todo = () => {
const [inputVal, setInput] = useState("");
const [list, setList] = useState([]);
const handleInput = e =&
浏览 0提问于2020-01-14得票数 0
1回答
React:无法筛选组件列表
javascript、node.js、reactjs、react-native、react-redux
我正在尝试拥有一个表字段列表，这些字段可以在任何时候添加和删除。
问题
一旦我单击删除中间的任何元素(上一个除外)，它就会删除它下面的所有项目。
代码是
我不知道是什么做错了，它删除了所有的元素，即使我试图删除一个特定的元素。
在这里添加代码
import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
const ListComponent = ({ remove, id }) => {
return (
<tr>
<
浏览 1提问于2021-03-02得票数 0
回答已采纳
4回答
如何防止React重新渲染？
javascript、reactjs
我正在学习React，目前正在尝试创建一个待办事项列表。一切正常，但是，当我尝试删除数组中的一项时，整个页面都会重新呈现。
有没有人能告诉我哪里出错了？我只想在单击按钮后删除一个特定的项目，而不是重新呈现整个页面。
代码：
import React, { Component } from "react";
import "./todo.css";
class Todo extends Component {
constructor(props) {
super(props);
this.state = {
task: "
浏览 2提问于2020-03-21得票数 4
3回答
useState变量不是delete函数的最新版本，React
javascript、reactjs、react-hooks、jsx、use-state
我有一个包含问题字段的div列表。每次点击按钮时，我会添加一行新的问题字段，并在状态中记住整个列表以及有多少行。我尝试添加一个delete按钮，但是当我的delete函数起作用时，状态变量的值似乎是在创建这行时被记住的。我如何解决这个问题，这样我才能访问HandleDelete函数中的完整列表？
const OefeningAanvragenDagboek = () => {
const { t, i18n } = useTranslation()
const [questionCount, setQuestionCount] = useState(1)
const [questionL
浏览 0提问于2020-03-13得票数 2
2回答
为什么我的UI不能正确地重新修改我被删除的对象？
javascript、reactjs、arrays、react-hooks
我有一个父组件，它使用一个list组件映射一个Input状态。
import "./styles.css";
import { useState, useEffect } from "react";
import Input from "./Input";
export default function App() {
const [list, setList] = useState([{}]);
useEffect(() => {
console.log("list", list);
}, [list
浏览 4提问于2022-06-28得票数 1
回答已采纳
1回答
实现useStack钩子后会出错。错误：(堆栈未定义)
javascript、reactjs、react-hooks
我有一个数组，它的值转换为按钮。单击每个按钮时，它的值将写入ul列表中。当单击“Pop”时，最后一个值是remove。
预期输出：
我使用useStack钩子来实现它。但是在运行之后，输出是一个空白页，我在控制台中接收到这个错误：
Uncaught TypeError: stack is undefined
components.js:
import React from 'react';
import {useStack} from './hooks'
export function Demo() {
return (
&l
浏览 3提问于2022-01-02得票数 0
回答已采纳
3回答
React在处理两个组件文件时未按预期工作
javascript、reactjs、jsx
我正在学习react的教程，我需要一些帮助。在我的完整代码中，我有2个文件.jsx。教程中的人悲哀地说，如果我们必须在状态中增加我们的价值，最好有一个真理。因此，我已经将文件中的增量代码与原始状态一起移动，但是我不能真正地递增该值。下面是我的第一个文件的代码：
import React, { Component } from 'react';
class Counter extends Component {
render() {
return (
<div>
<span className=
浏览 0提问于2020-12-30得票数 1
1回答
为什么我不能在TextInput中使用钩子状态再次编辑文本？
react-native
我目前正在开发一个应用程序，使用React。
这个试用应用程序有一个组件，它有一个TextInput和两个按钮(添加和删除)。
当我按下ADD Button时，会出现一个新组件。如果按下DELETE按钮，同一组件将消失。
我用索引控制TextInput，该索引与组件的索引相同。
屏幕就像下面的照片：
在这段代码中，当我编辑一些我已经输入的文本时，会出现一个bug。特别代表：
在输入区域索引处输入一些文本，然后运行良好。按ADD按钮再次编辑我在输入区域索引中已经完成的文本，然后我不能很好地输入文本.
我的问题是:为什么我不能编辑我已经输入的文本？
以下是代码：
import React
浏览 2提问于2020-08-12得票数 0
回答已采纳
4回答
删除函数组件中的目标行
javascript、reactjs
我希望呈现一个可以动态添加和删除的行列表。我有两个处理添加和删除行的组件：ClassComponent和FunctionComponent。ClassComponent按预期工作，但FunctionComponent只删除第一行。行以状态形式存储，并使用setState()进行更新。如何使FunctionComponent在逻辑上等同于ClassComponent
我正在使用库uuid来创建唯一的键。
import React from "react";
import { useState } from "react";
import { v4 as uuidv
浏览 8提问于2022-02-22得票数 1
回答已采纳
2回答
useMemo挂钩不适用于地图元素
reactjs、react-hooks、react-usememo
我使用useMemo钩子来渲染地图项目。我在useMemo钩子中添加了items参数，基于它将呈现的项目更改。但是改变加载状态和项目改变，项目自定义组件渲染两次。我在使用useMemo钩子时有没有做错，请纠正我。
Home:
import React, { useState, useEffect, useMemo } from "react";
import Item from "./Item";
const array = [1];
const newArray = [4];
const Home = () => {
const [items,
浏览 3提问于2021-09-24得票数 5
1回答
如何在reactjs中只更改映射数组中一个特定项的图标？
javascript、reactjs、ecmascript-6、react-hooks
我创建了特定便笺的钉扎和解压功能，所以当用户单击拇指图钉图标时，我只希望该特定音符的图标更改为十字图标，但当我单击第二个音符以将其钉住时，以前固定的便笺上更改的图标将恢复到原来的形式。
我使用onPin函数创建了固定功能，但很难更改特定固定项的图标。
我想要添加图标到固定项目的方式，以前添加关闭图标停留在他们的位置，并没有得到更新。
我试过什么？
因此，我创建了状态变量iconId，它是一个数组，因此每当用户单击固定图标时，新id就会被推送到iconId数组中，在显示输出时，我提出了这样一个条件:如果当前id包含在iconId数组中，那么将iconId中的所有相应id的图标更改为交叉图标，显然
浏览 4提问于2022-09-08得票数 0
2回答
学习反应- ReferenceError
javascript、reactjs
从今天开始学习react，我遇到了一个可能与JS相关而不是实际反应的问题。
import React, { useState } from "react";
import Counter from "./counter";
function Counters() {
const [counters, setCounters] = useState([
{ id: 1, value: 4 },
{ id: 2, value: 0 },
{ id: 3, value: 0 },
{ id: 4, value: 0 },
])
浏览 0提问于2020-12-23得票数 1
回答已采纳
3回答
如何使用React删除列表项(函数组件)
javascript、reactjs、list、react-functional-component
我只是在做一个简单的练习清单，我希望能够点击列表上的一个项目来删除它。我认为它非常接近，但我想不出如何从点击的li中获取某种数据来将其与我的数组进行比较。
App.js
import { useState } from "react";
import "./App.css";
import Newtodo from "./NewTodo/NewTodo";
import TodoList from "./TodoList/TodoList";
let INITIAL_TODOS = [
{ id: "e1",
浏览 6提问于2021-10-25得票数 2
回答已采纳
2回答
从一个数组中移除对象，同时将其添加到不同的数组--反应钩子
arrays、reactjs、react-hooks、use-state
我正在开发一个类似Tinder的应用程序，并尝试从数组中删除当前的卡片，然后在单击“类似”或“不喜欢”按钮时移到下一个。同时，我试图将卡片添加到一个新的数组中(喜欢或不喜欢的列表)。将对象添加到新数组似乎是可行的(尽管延迟和按钮需要点击两次--这也需要排序)，但当我试图从当前数组中删除它时，所有的操作都会崩溃。
我试着看这个解决方案：，但是无论我尝试什么，我都只得到"TypeError:无法读取未定义的属性‘目标’。我遗漏了什么？
这是代码：
import React, { useState, useEffect } from 'react';
import { Car
浏览 0提问于2020-08-17得票数 0
回答已采纳
1回答
React删除错误的文档id
javascript、reactjs、firebase、google-cloud-firestore、material-ui
我一直试图使用Reactjs在firebase数据库上执行删除操作。我有一个错误，我的函数从消防基地抓取错误的id。
我有一个按钮，它调用一个handleOpen函数，它打开一个Modal。
模式操作：
// Grabs the right id
const [open, setOpen] = useState(false);
const handleOpen = (id) => {
console.log(id);
setOpen(true);
};
const handleClose = () => setOpen(false);
我有一个按钮，
浏览 0提问于2021-10-27得票数 1
回答已采纳
4回答
使用ReactJS隐藏/显示内容
javascript、reactjs、ecmascript-6、react-hooks、setstate
我正在尝试实现Show More/Show Less。到目前为止，我已经启动了一个ItemViewer组件，在其中我可以显示项目列表。对于每个部分，将有显示更多/显示更少的链接。当项目数量大于3时，显示更多应该是可见的，并且它应该能够切换(显示更多/显示更少)。当项目数量少于3个时，不要显示链接。当没有数据时，也会显示“找不到数据”。 我想出了一个沙盒：https://codesandbox.io/s/pensive-kirch-1fgq3 有人能帮帮我吗？ import React from "react";
import ReactDOM from "react-
浏览 32提问于2019-12-23得票数 1
回答已采纳
1回答
React JS中的奇怪行为
reactjs
我试图在Array.map循环中呈现一个函数组件，当我删除数组的第一个元素时，它会重新呈现主组件，而不是显示剩余的数组元素，而是从UI中删除最后一个元素！(删除的元素保留在UI上！) 我确信我删除的元素是正确的。我在Array.map函数中正确地使用了索引{key=}。我尝试在Array.map中console.log正在呈现给DOM的元素，它显示了正确的元素！但是UI与记录的UI不同！ // index.tsx
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
import React,
浏览 23提问于2021-02-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
