我在反应项目中有标签组件。
我有两个标签。选项卡1和选项卡2.当用户单击选项卡1的包含时,选择我要将选项卡1中的活动选项卡更改为选项卡2.
对于前。
我有两个标签Tab1和Tab2。 Tab1包含test1和test 2.Tab2包含test3和test4。
当用户点击test1(Tab1包含)时,我想将活动标签从Tab1更改为Tab2。
我该怎么做。
答案 0 :(得分:2)
我从材料-ui文档中获取了Basic Tabs示例,并根据您的示例对其进行了调整。
请注意,在原始的“基本”标签示例中,代码通过在value
中设置this.state
属性来跟踪哪个标签处于活动状态。为了在单击Tab One中的项目时切换选项卡,您需要做的就是在Tab One中单击某些内容时更新value
属性。我在下面发表了评论。
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Tabs, { Tab } from 'material-ui/Tabs';
import Typography from 'material-ui/Typography';
function TabContainer(props) {
return (
<Typography {...props} component="div" style={{ padding: 8 * 3 }}>
{props.children}
</Typography>
);
}
TabContainer.propTypes = {
children: PropTypes.node.isRequired,
};
const styles = theme => ({
root: {
flexGrow: 1,
marginTop: theme.spacing.unit * 3,
backgroundColor: theme.palette.background.paper,
},
});
class BasicTabs extends React.Component {
state = {
activeTabIndex: 0,
};
handleChange = (event, value) => {
this.setState({ activeTabIndex: value });
};
render() {
const { classes } = this.props;
const { activeTabIndex } = this.state;
return (
<div className={classes.root}>
<AppBar position="static">
<Tabs value={activeTabIndex} onChange={this.handleChange}>
<Tab label="Tab One" />
<Tab label="Tab Two" />
</Tabs>
</AppBar>
{
activeTabIndex === 0 &&
// When the user clicks on Test One or Test Two, update the state
// to display Tab 2
<div onClick={() => this.setState({ activeTabIndex: 1 })}>
<TabContainer >
Test One
</TabContainer>
<TabContainer>
Test Two
</TabContainer>
</div>
}
{
activeTabIndex === 1 &&
<div>
<TabContainer>
Test Three
</TabContainer>
<TabContainer>
Test Four
</TabContainer>
</div>
}
</div>
);
}
}
BasicTabs.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(BasicTabs);
答案 1 :(得分:0)
面对问题:“制表符”中的onChange无效,原因是在销毁道具并影响物料UI所需的道具时忘记添加{... other}。花了两个小时修复它= /
const Tab = ({myPersonalProps, ...other}) => {.... return <MaterialTab {...other}>}
答案 2 :(得分:0)
这是使用钩子的最简单答案。
import { useState } from 'react';
..
const [tabState, setTabState] = useState(1);
...
const handleTabs = (value) => {
setTabState(value);
return;
}
let tabs_array = [<>{variable_with_contents_tab_1}</>, <>{tab_2_contents}</>];
然后在渲染中,您可以提供ui标签页
<Paper className={classes.root}>
<Tabs
value={tabState}
onChange={(event, value) => { handleTabs(value) }}
indicatorColor="primary"
textColor="primary"
centered
>
<Tab value={1} label='Tab1'>
</Tab>
<Tab value={2} label="Tab2" />
</Tabs>
</Paper>
<Paper>
{tabs_array[tabState-1]}
</Paper>