如何将 <Link> react-router 添加到 Material-table?
How to add <Link> react-router to Material-table?
我正在使用 material-table 库是一个基于 Material-UI Table.[= 的 Datatable 15=]
数据table 具有 editable 的属性并在同一个 table 中添加一条新记录,但我不想在同一个 [=30] 中添加新记录=].
我需要使用一个按钮,因为我希望它可以打开 material UI 菜单。但是,我不知道如何添加 link 或类似的东西。
我用下面的代码片段试了一下,但它告诉我 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>
您是否将其嵌套在 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>
添加了关于合并 Material Table 的部分。尝试将 Router 设置为根容器。
actions={[
icon: () => <Link to='/test'><Icon /></Link>,
tooltip: 'tip',
onClick: (event, rowData) =>
localStorage.setItem('selectedRowData', rowData)
]}
Link to='/test' --> The desired root that you want to open by clicking on the action
Icon --> Action icon that you can use with import and placement
onClick -->
In the Onclick event, you save the information you want to take to the desired root
提示:记住,如果数据很大,最好使用redux
而不是这个
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
我正在使用 material-table 库是一个基于 Material-UI Table.[= 的 Datatable 15=]
数据table 具有 editable 的属性并在同一个 table 中添加一条新记录,但我不想在同一个 [=30] 中添加新记录=].
我需要使用一个按钮,因为我希望它可以打开 material UI 菜单。但是,我不知道如何添加 link 或类似的东西。
我用下面的代码片段试了一下,但它告诉我 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>
您是否将其嵌套在 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>
添加了关于合并 Material Table 的部分。尝试将 Router 设置为根容器。
actions={[
icon: () => <Link to='/test'><Icon /></Link>,
tooltip: 'tip',
onClick: (event, rowData) =>
localStorage.setItem('selectedRowData', rowData)
]}
Link to='/test' --> The desired root that you want to open by clicking on the action
Icon --> Action icon that you can use with import and placement
onClick --> In the Onclick event, you save the information you want to take to the desired root
提示:记住,如果数据很大,最好使用redux
而不是这个
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