Material UI 为 React js 项目提供的选项卡中的导航问题
navigation problem in Tabs provided by Material UI for React js Project
我在我的项目中使用 React Js 和 Material UI 选项卡组件在 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 并呈现带有 tab 的 Tab 2 组件选项卡 2 上的指示器
几件事:
为每个 Tab
设置 onClick
事件真的没有意义,因为您需要做的一切都可以在 Tabs
的 onChange
处理程序中完成。
因此,当触发 onChange
时,您可以设置 selected 选项卡值,然后调用 this.props.history.push
。确保根据 selected.
的选项卡呈现子组件
如果您希望路由 /tab2
自动 select tab2,则需要检查 componentDidMount()
中的当前路由,然后相应地设置状态。例如,如果 route == '/tab2' then state.value == 2
这是直接取自 Material-UI 文档的示例。
<div className={classes.root}>
<AppBar position="static">
<Tabs value={value} onChange={this.handleChange}>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
</Tabs>
</AppBar>
{value === 0 && <TabContainer>Item One</TabContainer>}
{value === 1 && <TabContainer>Item Two</TabContainer>}
{value === 2 && <TabContainer>Item Three</TabContainer>}
</div>
您的组件最终应该看起来像这样
class NavBars extends React {
state = {
value: 0,
};
handleChange = (event, value) => {
if (value == 0) {this.props.history.push('/tab1')}
if(value == 1) {this.props.history.push('/tab2')}
};
componentDidMount() {
if(this.props.location.pathname == '/tab1') {
this.setState({value: 0})
} else {
this.setState({value: 1})
}
}
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"
/>
<Tab
disableRipple
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
label="Tab 2"
/>
</Tabs>
{value == 0 && <p>Here is tab 1 content</p>}
{value == 1 && <p>Here is tab 2 content</p>}
</div>
);
}
}
我在我的项目中使用 React Js 和 Material UI 选项卡组件在 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 并呈现带有 tab 的 Tab 2 组件选项卡 2 上的指示器
几件事:
为每个 Tab
设置 onClick
事件真的没有意义,因为您需要做的一切都可以在 Tabs
的 onChange
处理程序中完成。
因此,当触发 onChange
时,您可以设置 selected 选项卡值,然后调用 this.props.history.push
。确保根据 selected.
如果您希望路由 /tab2
自动 select tab2,则需要检查 componentDidMount()
中的当前路由,然后相应地设置状态。例如,如果 route == '/tab2' then state.value == 2
这是直接取自 Material-UI 文档的示例。
<div className={classes.root}>
<AppBar position="static">
<Tabs value={value} onChange={this.handleChange}>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
</Tabs>
</AppBar>
{value === 0 && <TabContainer>Item One</TabContainer>}
{value === 1 && <TabContainer>Item Two</TabContainer>}
{value === 2 && <TabContainer>Item Three</TabContainer>}
</div>
您的组件最终应该看起来像这样
class NavBars extends React {
state = {
value: 0,
};
handleChange = (event, value) => {
if (value == 0) {this.props.history.push('/tab1')}
if(value == 1) {this.props.history.push('/tab2')}
};
componentDidMount() {
if(this.props.location.pathname == '/tab1') {
this.setState({value: 0})
} else {
this.setState({value: 1})
}
}
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"
/>
<Tab
disableRipple
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
label="Tab 2"
/>
</Tabs>
{value == 0 && <p>Here is tab 1 content</p>}
{value == 1 && <p>Here is tab 2 content</p>}
</div>
);
}
}