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>

请记住，我将一个函数传递给我的主app文件，欢迎提出任何建议。提前谢谢。

Answer 1

您应该在您定义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>

Answer 2

这是一篇较旧的文章，但我只是想将其作为一种可能的解决方案。

class SiteBar extends React.Component {
constructor(props) {
    super(props) 
    this.state = {
        isOpen: false
    }
       this.toggle = this.toggle.bind(this);
}
toggle() {
    this.setState(prevState => {
        return {
            isOpen: !prevState.isOpen
        }
    });
}
render() {
    let btnTxt = this.state.isOpen ? 'Login' : 'Logout'
    return (
        <React.Fragment>
            <Navbar color="faded"  light expand="md">
                <Collapse isOpen={this.state.isOpen} navbar>
                    <Nav className="ml-auto" navbar>
                        <NavItem>
                            <Button color="light" onClick={this.toggle}>{btnTxt}</Button>
                        </NavItem>
                    </Nav>
                </Collapse>
            </Navbar>
        </React.Fragment>

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

2 个答案: