登入登出功能实现（条件渲染）

原创于 2018-12-06 09:49:16 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用React实现的登录控制组件，该组件通过状态管理实现登录与登出的条件渲染，展示了如何使用React的状态更新和事件处理来切换显示内容和按钮文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

登入登出功能实现（条件渲染）

在这里插入图片描述

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class LoginControl extends React.Component {
    constructor(props) {
        super(props);
        this.state={isToggleOn:false}
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(e) {
        this.setState(prevState =>({isToggleOn:!prevState.isToggleOn}));
     /*   this.setState({
            isToggleOn: true
        });*/
    }
    render() {
        const isToggleOn =this.state.isToggleOn
        let showContent= ""
        if(isToggleOn) {
            showContent = '欢迎登入'
        }else{ showContent = '尚未登入'}
        return (
            <div>
                <h1 isToggleOn ={this.state.isToggleOn}>{showContent}</h1>
                <button onClick={this.handleClick}>
                    {this.state.isToggleOn ? 'Logout' : 'Login'}
                </button>
            </div>
        );
    }
}
ReactDOM.render(
    <LoginControl />,
    document.getElementById('root')
);