[英]How to add <Link> react-router per each Material-UI TableRow?
[英]How to add <Link> react-router to Material-table?
我使用的材料表库是一个基于 Material-UI 表的数据表。
数据表具有可编辑的属性并在同一个表中添加一条新记录,但我不想在同一个表中执行此操作。
我需要使用一个按钮,因为我希望它打开一个材质 UI 菜单。 但是,我不知道如何添加链接或类似的东西。
我用下面的代码片段尝试了它,但它告诉我 Link 没有定义,即使它确实很重要
import React, { useState, useEffect } from 'react';
import MaterialTable from 'material-table';
import EditIcon from '@material-ui/icons/Edit';
import { IconButton } from '@material-ui/core';
import axios from 'axios';
import { Link} from 'react-router-dom';
export default function TableProducts() {
const url='/api/products';
const [product, setProduct]= useState({Products:[]});
useEffect(()=>{
const getProduct=async()=>{
const response =await axios.get(url);
setProduct(response.data);
}
getProduct();
},[]);
return (
<MaterialTable
title="Products"
columns={[
{title: 'id',field: 'id', type: 'numeric', hidden:'false'},
{ title: 'nameproduct',field: 'nameproduct', },
{ title: 'description', field: 'description' },
{ title: 'price', field: 'price' },
]}
data={product.Products}
options={{
filtering: true,
sorting: true
}}
actions={[
{
icon: 'edit',
tooltip: 'Edit ',
onClick: () =>
<Link to={`/product/${data._id}/edit`}>Edit</Link>
}
]}
/>
);
}
我想完成这样的事情
<Link
to={`/product/edit/${product.id}`}
className="btn btn-success mr-2">Editar
</Link>
而不是这个
actions={[
{
icon: 'edit',
tooltip: 'Edit ',
onClick: () =>
<Link to={`/product/${data._id}/edit`}>Edit</Link>
}
]}
做这个
actions={[
rowData => ({
icon: () => <Link to={`/product/${rowData._id}/edit`}>Edit(Replace with icon code)</Link>
tooltip: 'Edit ',
onClick: (rowData)
})
]}
欲了解更多信息,请访问https://material-table.com/#/docs/features/actions
您是否将其嵌套在 Router 组件中,例如
<Router>
<MaterialTable ...>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
</div>
</MaterialTable>
</Router>
增加了关于合并材料表的部分。 只需尝试使路由器成为根容器。
actions={[
icon: () => <Link to='/test'><Icon /></Link>,
tooltip: 'tip',
onClick: (event, rowData) =>
localStorage.setItem('selectedRowData', rowData)
]}
Link to='/test' --> 你想通过点击动作打开的根目录
图标 --> 可用于导入和放置的操作图标
onClick --> 在 Onclick 事件中,您将要获取的信息保存到所需的根目录
提示:记住,如果数据量大,最好使用redux
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.