我在我的项目中使用 React Js 和 Material UI Tabs 组件在 2 个组件之间导航。
当我通过单击转到选项卡 2 或选项卡 1 时,我的组件会呈现并且路径会更改,但选项卡指示器不会在活动选项卡上更新。
我已经尝试更新按钮单击的状态,但它不起作用
class NavBars extends React.Component {
state = {
value: 0,
};
handleChange = (event, value) => {
this.setState({ value });
console.log(this);
};
navigateToTab2 = () => {
this.setState({ value: 1 });
console.log(this.state);
this.props.history.push('/tab2');
}
navigateToTab1 = (facility, event) => {
this.setState({ value: 0 });
console.log(this.state);
this.props.history.push('/tab1', {
facilityId: facility.facilityId,
facilityName: facility.facilityName,
});
}
render() {
const { classes } = this.props;
const { value } = this.state;
return (
<div className={classes.root}>
<Tabs
value={value}
onChange={this.handleChange}
classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
>
<Tab
disableRipple
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
label="Tab 1"
onClick={this.navigateToTab1}
/>
<Tab
disableRipple
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
label="Tab 2"
onClick={this.navigateToTab2}
/>
</Tabs>
</div>
);
}
}
我希望当我单击 Tab1 时,它应该转到 Tab1 并在 Tab 1 上呈现带有 Tab 指示器的组件,当我单击 Tab 2 时,它应该转到 Tab 2 并在选项卡 2 上呈现带有 Tab 指示器的 Tab 2 组件