在登录/注销时更改React按钮文本

Posted 2021-04-05

我对React很新，正在制作一个涉及登录/登录的应用程序。我的导航栏上有登录按钮，我希望更改文本，以便当用户登录按钮文本时更改为“Loggout”，反之亦然。

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
}

然后，您还传递该类中的道具并将该状态作为道具传递。

<SiteBar clickLogOut={this.clickLogOut} isLoggedIn={this.state.isLoggedIn}/> 

按钮文本的条件是prop isLoggedIn。当按钮触发onClick函数时，函数clickLogout()应该将isLoggedIn更改为true，从而重新渲染ClassSite和带有Logout文本的按钮

<Button color="light" onClick={() => this.props.clickLogout()}>
    {this.props.isLoggedIn? 'Logout' : 'Login'}
</Button>