Question

当我第一次登录时，注销链接出现，并且open变量的初始状态为true，但是我的open变量的初始状态应该为false，我想不显示此链接。

我尝试添加注销是否在render上自动调用toggleOpen（）方法，但是发现它尚未被调用。

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Meteor } from 'meteor/meteor';
class UserMenu extends Component {
    constructor(props){
        super(props);
         this.toggleOpen = this.toggleOpen.bind(this);
        this.state = {
            open:false
        }
    }
    logout(){
        Meteor.logout();
    }
    toggleOpen() {
        this.setState({open:!this.state.open});
    }
    renderLoggedIn(){
        const user = this.props.user;
        return (
             <div className='user-menu vertical'>
                <a href="#" onClick={this.toggleOpen}>{user.username}<span className={`icon-arrow-${this.state.open?"up":"down"}`}></span></a>
                {this.state.open &&  <a href="#" onClick={this.logout}>Logout</a>}
            </div>
        );
    }
    renderLoggedOut(){
        return (
            <div className='user-menu'>
                <Link to='/signin'>Sign In</Link>
                <Link to='/join'>Join</Link>
            </div>
        );  
    }
    render() {
        const user = this.props.user;
        return user? this.renderLoggedIn():this.renderLoggedOut();
    }
}

export default UserMenu;

我希望在单击toggleOpen（）之前不会出现注销链接。

Answer 1

单击<a />时打开状态是否变为false？一种解决方法是使用字符串作为开放状态变量，例如{open: 'opened'}或{open:'closed'}并进行字符串比较，例如this.state.open === 'opened'。

Answer 2

哦，我找到了。单击注销时，打开状态尚未重置（仍然为true），因此单击后注销时，重置为false即可。

logout(){
    Meteor.logout();
    this.setState({open:false});
}

为什么组件状态会自动更改（reactjs）？

2 个答案: