在ReactJS的材料表中创建新行并访问取消处理程序,可以通过以下步骤实现:
以下是一个示例代码,演示如何在ReactJS的材料表中创建新行并访问取消处理程序:
import React, { useState } from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Button } from '@material-ui/core';
const MyTable = () => {
const [data, setData] = useState([
{ id: 1, name: 'John Doe', age: 25 },
{ id: 2, name: 'Jane Smith', age: 30 },
{ id: 3, name: 'Bob Johnson', age: 35 }
]);
const handleCancel = (index) => {
const newData = [...data];
newData.splice(index, 1);
setData(newData);
};
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>Name</TableCell>
<TableCell>Age</TableCell>
<TableCell>Action</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((row, index) => (
<TableRow key={row.id}>
<TableCell>{row.id}</TableCell>
<TableCell>{row.name}</TableCell>
<TableCell>{row.age}</TableCell>
<TableCell>
<Button onClick={() => handleCancel(index)}>Cancel</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
};
export default MyTable;
在上述代码中,我们使用了Material-UI的Table组件和相关的子组件来创建表格结构。数据数组被映射为表格的行,并在每一行的最后一列添加了一个取消按钮。点击取消按钮时,会调用handleCancel方法来处理取消操作。在handleCancel方法中,我们使用splice方法从数据数组中删除了相应的行数据,并通过setData更新了组件的状态,以便重新渲染表格并显示更新后的数据。
这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。如果你想了解更多关于ReactJS和Material-UI的信息,可以参考腾讯云的相关产品和文档:
领取专属 10元无门槛券
手把手带您无忧上云