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

Question

我是 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>

请记住，我正在将一个函数传递给我的主应用程序文件，欢迎提出任何建议。提前致谢。

Answer 1

您应该向定义 this.props.clickLogout 的类添加一个状态

this.state = {
    isLoggedIn: false
}

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

<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>