import React from 'react';
import ReactDOM from 'react-dom'; class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
} handleLoginClick() {
this.setState({isLoggedIn: true});
} handleLogoutClick() {
this.setState({isLoggedIn: false});
} render() {
const isLoggedIn = this.state.isLoggedIn;
let button; if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
} return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
} function UserGreeting(props) {
return <h1>Welcome back!</h1>;
} function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
} function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
} function LoginButton(props) {
return (
<button onClick={props.onClick}>
Login
</button>
);
} function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
} ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
import React from 'react';
import ReactDOM from 'react-dom'; function WarningBanner(props) {
if (!props.warn) {
return null;
} return (
<div className="warning">
Warning!
</div>
);
} class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true}
this.handleToggleClick = this.handleToggleClick.bind(this);
} handleToggleClick() {
this.setState(prevState => ({
showWarning: !prevState.showWarning
}));
} render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
} ReactDOM.render(
<Page />,
document.getElementById('root')
);

react 中文文档案例四 (登陆登出按钮)的更多相关文章

  1. react 中文文档案例三 (开关按钮)

    开关按钮制作   import React from 'react'; import ReactDOM from 'react-dom'; class Toggle extends React.Com ...

  2. react 中文文档案例七 (温度计)

    const scaleNames = { c: 'Celsius', f: 'Fahrenheit' }; function toCelsius(fahrenheit) { ) * / ; } fun ...

  3. react 中文文档案例六 (表单)

    class Reservation extends React.Component { constructor(props) { super(props); this.state = { isGoin ...

  4. react 中文文档案例五 (循环列表)

    function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) = ...

  5. react 中文文档案例二 (头像时间)

    import React from 'react'; import ReactDOM from 'react-dom'; function formatDate(date) { return date ...

  6. react 中文文档案例一 (倒计时)

    1.函数试组件 import React from 'react'; import ReactDOM from 'react-dom'; function Clock(props){ return( ...

  7. ThinkPHP---案例1登录登出和添加部门

    配置文件分3类:系统配置文件,分组配置文件,应用配置文件 ①系统配置文件ThinkPHP/Conf/convention.php: ②分组 / 模块 /平台配置文件Home/Conf/config.p ...

  8. ASP.NET Core 中文文档 第四章 MVC(4.6)Areas(区域)

    原文:Areas 作者:Dhananjay Kumar 和 Rick Anderson 翻译:耿晓亮(Blue) 校对:许登洋(Seay) Areas 是 ASP.NET MVC 用来将相关功能组织成 ...

  9. ASP.NET Core 中文文档 第四章 MVC(4.1)Controllers, Actions 和 Action Results

    原文:Controllers, Actions, and Action Results 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:许登洋(Seay) Action 和 acti ...

随机推荐

  1. NSOperation/NSOperationQueue详细使用介绍

      一.简介 (1)是使用GCD实现的一套Objective-C的API (2)是面向对象的线程技术 (3)提供了一些在GCD中不容易实现的特性,如:限制最大并发数量.操作之间的依赖关系   NSOp ...

  2. oracle数据库部分技巧

    由于笔者在操作数据库时,遇到几个以前不太常见的操作,感觉有必要记录一下,如下: 1.查被锁表  SELECT object_name, machine, s.sid, s.serial#  FROM ...

  3. Emulator PANIC: Could not open: AVD2.3.1

    这是这两年的sdk才需要这样,以前这样根本没错的 在环境变量 里面增加一个系统变量ANDROID_SDK_HOME,值就是当前的系统用户文件夹的位置.比如c:\\Users\xxx(不要加.andro ...

  4. android键盘的Done按钮

    在EditText中,可以使用setImeOptions()方法来来开启软键盘的"Done"按钮. 示例代码如下:editText.setImeOptions(EditorInfo ...

  5. sklearn.svm.SVC参数说明

    摘自:https://blog.csdn.net/szlcw1/article/details/52336824 本身这个函数也是基于libsvm实现的,所以在参数设置上有很多相似的地方.(PS: l ...

  6. Codeforces 960F 线段树

    题意:https://blog.csdn.net/qq_39809664/article/details/79871282 思路:我们考虑LIS的状态转移,对于这个题,假设现在扫描到的边是(u, v, ...

  7. session和cookie个字消除的方法

    session消除的方法就是: session_destroy(); cookie消除的方法就是setcookie()函数的时间设为当前时间即可 if(isset($_COOKIE['adminId' ...

  8. 大O表示法总结

    大O符号用于计算机科学来描述算法的性能或复杂性.Big O特别描述了最坏的情况,可以用算法来描述所需的执行时间或使用的空间(例如在内存或磁盘上). 任何读过Programming Pearls(编程珠 ...

  9. ROS Learning-022 learning_tf-06(编程) 现在与过去中穿梭 (Python版) --- waitForTransformFull() 函数

    ROS Indigo learning_tf-06 现在与过去中穿梭 (Python版) - waitForTransformFull() 函数 我使用的虚拟机软件:VMware Workstatio ...

  10. JavaPersistenceWithHibernate第二版笔记-第七章-002Mapping an identifier bag(@CollectionId、@ElementCollection、@CollectionTable、@Type)

    一.结构 A bag is an unordered collection that allows duplicate elements, like the java.util.Collection ...