我对 React 还很陌生,正在制作一个涉及登录的应用程序。我的导航栏上有登录按钮,我希望更改文本,以便当用户登录时,按钮的文本更改为“注销”,反之亦然。
class SiteBar extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false,
};
}
toggle() {
this.setState({
isOpen: !this.state.isOpen,
});
}
render() {
return (
<div>
<div>
<Navbar color="faded" light expand="md">
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<Button color="light" onClick={() => this.props.clickLogout()}>{this.onClick ? 'Login' : 'Logout'}</Button>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
请记住,我正在将一个函数传递给我的主应用程序文件,欢迎任何建议。提前致谢。
最佳答案
您应该向定义 this.props.clickLogout 的类添加一个状态
this.state = {
isLoggedIn: false
}
然后,您还传递该类的 props 并将状态作为 props 传递。
<SiteBar clickLogOut={this.clickLogOut} isLoggedIn={this.state.isLoggedIn}/>
按钮文本的条件是属性isLoggedIn
。当按钮触发 onClick 函数时,函数 clickLogout()
应将 isLoggedIn
更改为 true,从而重新呈现 ClassSite 和带有文本 Logout 的按钮
<Button color="light" onClick={() => this.props.clickLogout()}>
{this.props.isLoggedIn? 'Logout' : 'Login'}
</Button>
关于reactjs - 更改登录/注销时的 React 按钮文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48969252/