Javascriptログインした場合はセッション記憶に変更するナビゲーションリンク

Question

私はloggedInと呼ばれるsessionstorage変数を持っています。

これをtrueに設定する（ユーザーがログインしている）私は、ログインリンクを変更する必要がありますので、私はfalseにのsessionStorageのvarialeを変更するにはlogoutメソッドを使用することができます

<li><a href="" onClick('logout()')>Logout</li> 

。ここで

は、現在のコードです：

class Nav extends React.Component { 
constructor(props) { 
    super(props); 
    this.isLoggedIn = sessionStorage.getItem('isLoggedIn') === 'true'; 
    this.state = { 
     message: 'You are Logged In', 
    }; 

} 

logout() { 
    sessionStorage.setItem('loggedIn', false); 
    // then update changes 
} 

    render() { 
    return (
     <ul> 
     <li><a href="#home">Home</li> 
     <li><a href="#login">Login</li> // If Not logged in change this to <li><a href="" onClick('logout()')>Logout</li> 
     <li></li> // If loggedin the show Message here 
     </ul> 
    ) 
    } 

はどうすればこれを行うことができますか？

Answer 1

変数stateでユーザーのログインステータスを維持し、に変数isLoggedInを格納し、その変数をユーザーのログインステータスに基づいて更新します。

の値に基づいて、異なる要素をconditional renderingからrenderまで使用してください。

onClick={this.logout} 

そしてconstructorでこのメソッドをバインドします

もう一つの変化は、あなたがログアウト時にクリックイベントを定義された方法で、それがなければなりません。

は、ドキュメントをチェック：How to handle events in JSX

はこのようにそれを書く：

class Nav extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     message: 'You are Logged In', 
     isLoggedIn: sessionStorage.getItem('isLoggedIn') === 'true' 
     }; 
     this.logout = this.logout.bind(this); 
    } 

    logout() { 
    sessionStorage.setItem('loggedIn', false); 

    //here update the state variable 

    this.setState({ 
     isLoggedIn: false 
    }); 
    } 

    render() { 
    return (
     <ul> 
     <li><a href="#home">Home</li> 

     {/*use condition here if user is loggedin then render the logout otherwise login button*/}   

     {this.state.isLoggedIn ? 
      <li><a href="" onClick={this.logout}>Logout</li> 
      : 
      <li><a href="#login">Login</li> 
     } 

     <li></li> 
     </ul> 
    ) 
    } 
} 

Answer 2

あなたはこのようなJSXで三項演算子を使用することができます

{this.isLoggedIn ? <li><a href="" onClick={this.logout}>Logout</a></li> : <li><a href="#login">Login</a></li>} 

をし、あなたには、いくつかのmessgeにしたい場合場合条件が真であれば、次のようにすることができます：

{this.isLoggedIn && <li>Your message</li>} 

isLoggedInを保存した方が良いでしょう。

詳しくは、ここをクリックhttps://facebook.github.io/react/docs/conditional-rendering.html