如何解决如何根据两个组件的[id]更改两个选项卡面板材料ui中的url?
我正在使用React框架,情况是我的子组件中有两个选项卡面板,并且我还在使用虚拟数据,因为原始数据仍在进行中,并且我未在所有组件中使用类。
这是我的主要组成部分:
export const MainComponent: React.FC<Test> = (props: Test) => {
console.log(props);
const show = (e: React.MouseEvent<HTMLElement>) => {
Router.push(e.currentTarget.dataset.item!!);
};
function createData(id: number,activity: string);
}
const rows = [
createData(1,'Act1'),createData(2,'Act2'),];
return (
<div>
<Card>
<CardContent>
<Table size='small' aria-label='a dense table'>
<TableHead>
<TableRow>
<TableCell align='left'><strong>Activity</strong></TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.id}>
<TableCell component='th' scope='row'>
{row.activity}
</TableCell>
<TableCell align='center'>
<Box display={'inline'} mx={1}>
<Button
size='small'
variant='contained'
onClick={show}
data-item={`/main/${row.id}`}
>
EDIT
</Button>
</Box>
<Button
size='small'
variant='contained'
>
DELETE
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CardContent>
</Card>
</div>
);
};
这是具有2个选项卡组件的子组件,因此该URL为“ / main / [id]”
function TabPanel(props: any) {
const {children,value,index,...other} = props;
return (
<Typography
component='div'
role='tabpanel'
hidden={value !== index}
id={`full-width-tabpanel-${index}`}
aria-labelledby={`full-width-tab-${index}`}
{...other}
>
{value === index && (
<Box p={2}>
<Typography component='div'> {children}</Typography>
</Box>
)}
</Typography>
);
}
function OrderProps(index: any) {
return {
'aria-controls': `full-width-tabpanel-${index}`,'id': `full-width-tab-${index}`,};
}
export const MainIdInputComponent: React.FC = (props) => {
const [tabValue,setTabValue] = React.useState(0);
const handleChange = (event: React.ChangeEvent<{}>) => {
if (tabValue === 1) {
setTabValue(0);
} else {
setTabValue(1);
}
};
const show = (e: React.MouseEvent<HTMLElement>) => {
Router.push(e.currentTarget.dataset.item!!);
};
console.log(props);
return (
<Grid>
<Grid item={true}>
<Button variant='outlined'
onClick={show}
data-item={'/main'}
size='medium'
color='default'>
{'Back'}
</Button>
</Grid>
<Grid item={true}>
<Paper square={true}>
<Tabs
value={tabValue}
indicatorColor='primary'
textColor='primary'
onChange={handleChange}
variant='fullWidth'
>
<Tab label='info' {...OrderProps(0)}/>
<Tab label='page' {...OrderProps(1)}/>
</Tabs>
</Paper>
<TabPanel value={tabValue} index={0}>
<InfoComponent/>
</TabPanel>
<TabPanel value={tabValue} index={1}>
<PageComponent/>
</TabPanel>
</Grid>
</Grid>
);
};
URL ID有效,但是当我按选项卡面板页面时,它确实更改为页面,但没有更改为URL,并且两个面板仍然相同。还要如何更改url?如果按下默认选项卡,则该URL将为显示信息组件的/ main / [id],但是如果我按下pageComponent,则希望将URL / main / [id] / page设置为不使选项板消失。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。