如何在React中从Modal中删除项
在React中从Modal中删除项的方法可以通过以下步骤实现：
- 首先，在React组件中创建一个状态变量来存储要显示的Modal和要删除的项。可以使用useState钩子函数来创建状态变量。
import React, { useState } from 'react';
function MyComponent() {
const [modalVisible, setModalVisible] = useState(false);
const [items, setItems] = useState([]);
// 其他代码...
return (
<div>
{/* 其他组件内容 */}
{modalVisible && (
<Modal>
{/* Modal的内容 */}
</Modal>
)}
</div>
);
}- 在需要删除项的地方，触发删除操作时，设置Modal的可见状态为true，并将要删除的项传递给Modal组件。
function MyComponent() {
// ...
const handleDeleteItem = (item) => {
setModalVisible(true);
setItems(item);
};
// ...
return (
<div>
{/* 其他组件内容 */}
{modalVisible && (
<Modal>
{/* Modal的内容 */}
<button onClick={() => deleteItem(items)}>确认删除</button>
</Modal>
)}
</div>
);
}- 在Modal组件中，添加删除项的逻辑。可以使用数组的filter方法来删除指定项，并更新状态变量。
function Modal({ children }) {
const handleDelete = () => {
// 删除项的逻辑
setItems(items.filter((item) => item.id !== items.id));
setModalVisible(false);
};
return (
<div>
{children}
<button onClick={handleDelete}>确认删除</button>
</div>
);
}通过以上步骤，可以在React中实现从Modal中删除项的功能。请注意，以上代码只是一个示例，具体实现可能会根据项目的需求和组件结构有所不同。
相关·内容
作为一个相当新的编程成瘾者，我被一个简单的应用程序困住了，它列出了项目。添加项目，是可以的。但是对于删除一个项目，我不知道如何实现这个函数。现在，在单击一个项目时，整个项目数组将被删除。我试图将deleteItem函数放在其他文件中，但是我似乎混淆了引用。
ItemContext.js：
import React, { useState, createContext } from 'react';
import { v1 as uuidv1 } from 'uuid';
export const ItemContext = createContext();
e
浏览 0提问于2021-03-11得票数 1
回答已采纳
const Monsters = function () {
const [allMonsters, setAllMonsters] = useState([]);
const [specificMonster, setSpecificMonster] = useState([]);
const [modalVisible, setModalVisible] = useState(false);
const openModal = () => {
setModalVisible(!modalVisible);
}
useEffect(() => {
axios(
浏览 1提问于2022-07-20得票数 1
2回答
假设我有一个下面的JSX代码：
var List = React.createClass({
render: function() {
var Items = this.props.data.map(function(item) {
return (
<Item key={item.id}>
{item.text}
</Item>
);
});
return (
<div className="items">
{
浏览 4提问于2016-03-15得票数 7
回答已采纳
1回答
所以我正在做一个列表，你可以在其中添加项目。添加它们时，有两个选项：
删除整个列表
删除特定项目。
但出于某种原因，"handeDelete“按钮不起作用。谁能告诉我我在代码中写错了什么？
指向CodeSandbox的链接是：
import { useState } from "react";
import uuid from "react-uuid";
export default function ItemList() {
const [items, setItems] = useState({ item: ""
浏览 4提问于2021-12-16得票数 2
回答已采纳
1回答
反应式打字钩和道具
、、、、
这是我的第一个项目，使用类型记录，也反应本土化。我只是在App.tsx上创建了一个简单的逻辑，然后我尝试用一个组件来分割它。但是，当我从Modal组件传递道具时，我会得到一个错误ts(2322)。我知道代码需要改进，因为这是我第一次使用类型记录。我不知道是否有人能帮我指导这件事。下面是我最初做的App.tsx：
import { Button, FlatList, Modal, StyleSheet, Text, TextInput, View } from 'react-native';
import React from 'react';
import {
浏览 2提问于2021-08-20得票数 0
回答已采纳
1回答
我需要修复我的应用程序中的内存泄漏，但我不确定如何做。我有一个使用模式的组件，当我添加一个项目时，我得到了错误。这个模式是可重用的，我也在其他组件中使用它。这是主要组件： import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Card, Select, Form, Button } from 'antd';
import Table from 'components/Table';
impo
浏览 15提问于2020-12-03得票数 0
回答已采纳
我正在尝试使用React Native开发一个应用程序，并解决一个困扰了我一段时间的问题。我最近一次尝试解决这个问题时遇到了一个错误：“无效的钩子调用。”我确信我的版本是匹配的，而且我的应用程序中肯定只有一个React副本，所以很明显我违反了钩子的规则。 我是一个在React Native中开发应用的新手，我不知道我在使用钩子的时候违反了什么规则。据我所知，我是在遵守规则。 下面是我在抛出错误之前更改的代码: RowCard.js //normal modal visibility handler
const RowCard = (props) => {
const [
浏览 29提问于2021-01-12得票数 0
回答已采纳
我在button click.In上动态添加列表，换句话说，我有一个text field和button按钮单击，我在list中添加了input text。
我的问题是我想在siblings.As之间共享数据，我有两个兄弟级组件search和ListItems
我想在items组件中发送list来呈现列表
这是我的代码
import React, { useState } from "react";
import "./styles.css";
const Search = () => {
const [state, setState] = useSt
浏览 4提问于2020-04-01得票数 0
回答已采纳
1回答
我有以下情况，我已经做了一个列表，添加(在按下按钮后)一个React。模型的最终布局如下所示
目前的代码如下：
import * as React from 'react';
import { Icon } from '../icon/icon';
import { Button } from '../..';
export interface PriorizationListProps {
children: React.ReactNode;
limit?: number;
}
export const Prior
浏览 2提问于2019-10-23得票数 2
回答已采纳
2回答
我做了一个项目列表，我可以添加项目，但我只能添加其中的一个，我不能两个都添加。description值被正确填充，而配方却没有。 这是我做的codesandbox。 https://codesandbox.io/s/magical-pond-vtu51?file=/src/App.js import React, { useState } from "react";
const NewMenu = () => {
const [recipeName, setRecipeName] = useState("");
const [descripti
浏览 44提问于2021-07-05得票数 1
我有两个不同的文件：HomeScreen.js和ModalWidget.js。第二个文件包含模式对话框窗口的实现，我需要通过单击主屏幕上的按钮来调用这个小部件。此外，这种模式必须有能力关闭自己的按钮在它。我试图使用全局状态挂钩，但它给了我一条错误消息：Invariant Violation: Invalid Hook call。那么，我如何从主屏幕上调用这种模式呢？
ModalWidget.js
import React, { useState } from 'react';
import { Text, Button, Modal } from 'react-nati
浏览 3提问于2020-04-10得票数 0
回答已采纳
关注我的app.js import Form from "./Containers/Form";
import { useState, useCallback } from "react";
import List from "./Containers/List";
function App() {
let [items,setItems] = useState([]);
const handleAdd = useCallback((item)=>{
let newItems=[...items,item];
s
浏览 57提问于2021-10-29得票数 0
回答已采纳
2回答
我正在处理将在使用JSON占位符API的应用程序中执行的CRUD操作。我想使用PUT请求更新API的数据，并将其显示回我的前端。我实际上是从用户端点获取数据。我不能执行PUT请求，并且我不知道在执行PUT请求后是否要设置数组。我一直收到一个错误，即:单击保存更改后，userData.map()不是一个函数。我知道在获取操作之后，我将一个对象设置为数组，这在逻辑上是不正确的。我目前使用的是Axios，也使用了fetch()，但没有用处。毫无办法!请帮我解决这个问题。我附加了下面的代码。"handleSave“是我执行更改的函数。 非常感谢您的提前！ import React,
浏览 55提问于2021-07-15得票数 1
回答已采纳
1回答
*我的目标是能够在每次调用generateNewTicket()时重新修改数据。但是，重呈现只在我触摸票证*时发生。
我尝试使用tryOut，我确信我不知道如何改变状态，但它没有起作用。
如果我将modalVisible设置为false，然后立即将其设置为true，则工作正常，但是系统首先从模式中出来，然后我需要单击再次查看该模式。
import React, { useState } from 'react';
import {
SafeAreaView,
View,
TouchableOpacity,
TouchableHighlight,
FlatLi
浏览 4提问于2020-06-05得票数 0
1回答
ı正在尝试为我的录音创建一个标题属性。当ı键入录音的名称时，如果它是列表中的第一个，则标题属性变为空白。在创建第二个记录并键入名称之后，它将获得前一个记录对象的标题。试图在stopRecording函数中更改模态函数的调用顺序，但没有工作。希望你能帮上忙。我的代码现在不干净，ı稍后会安排它，请忽略它。
import {
StyleSheet,
Text,
View,
Button,
FlatList,
TextInput,
Modal,
} from "react-native";
import { Audio } from "expo-av
浏览 6提问于2022-09-16得票数 0
回答已采纳
2回答
我正在处理一个react本机项目，我在javascript中有一个对象，其中包含一组不同的类别，以及该类别下的项。我还有一个函数(renderButtons())，用于呈现它们，映射对象，使每个项都显示为其各自类别下的按钮。但是，由于某种原因，这个函数只是没有在页面上显示任何内容。
当我没有使用<Text>或<Button>时，我使用alert，然后函数完美地调用，并获取我想要的所有值，但它实际上不会在页面上显示自己。页面上的其他内容都呈现得很完美，那么我做错了什么呢？
我的屏幕.js代码如下(为了清晰起见省略了一些部分)：
import React, {useStat
浏览 3提问于2022-04-17得票数 0
回答已采纳
我刚开始学习react，在使用.filter()方法筛选数组时遇到了问题。我试图创建一个购物清单，我不断收到错误信息“不能读取null的属性(读取‘过滤器’)”，有人能帮助我完成这项工作吗？这是我的密码。
import Header from './Header';
import SearchItem from './SearchItem';
import AddItem from './AddItem';
import Content from './Content';
import Footer from './Foo
浏览 5提问于2022-11-17得票数 0
在一个小的React应用程序中，我试图通过一个列表按钮添加删除功能。目前，我正在通过deleteItem函数进行尝试，该函数使用array.splice原型方法。
但是，我遇到了错误，Too many re-renders. React limits the number of renders to prevent an infinite loop.。造成这一错误的原因是什么？当单击按钮时，不应该只调用该函数一次吗？
我如何解决这个错误？
import "./styles.css";
import React, { useState, Fragment } from "
浏览 6提问于2022-04-15得票数 0
回答已采纳
我对此反应很新。所以我有一个父组件，它有两个子组件。这两个子类是应该显示的列表。到目前为止，我已经知道了如何通过检查数据的status属性在两个列表之间传输数据。我无法理解如何将数据添加到单独的列表中并编辑它们，因为父组件呈现这两个列表。有人能解释如何添加和编辑用户将输入的新数据吗？我是应该在Item页面上创建新的状态和道具，还是应该在子组件页面上创建它们？我很困惑。
import React,{useState,useEffect} from 'react'
import { Completed } from './Completed'
import {
浏览 3提问于2021-04-01得票数 0
回答已采纳
在这里我的产品组件定义了删除函数
我无法从产品列表中删除项目。需要帮助来解决这个问题。请帮我处理这个。谢谢。
import React, { useContext } from "react";
import { ContextProduct } from "./ContextProduct";
function Product({ name, price }) {
const [items, setItems] = useContext(ContextProduct);
const removeProd
浏览 0提问于2020-09-26得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
