开关按钮制作
 
import React from 'react';
import ReactDOM from 'react-dom'; class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true}; // 这个绑定是必要的,使`this`在回调中起作用
this.handleClick = this.handleClick.bind(this);
} handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
} render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
} ReactDOM.render(
<Toggle />,
document.getElementById('root')
);

  

注:

// 这个绑定是必要的,使`this`在回调中起作用

this.handleClick = this.handleClick.bind(this);
onClick={this.handleClick}
 
或者:
onClick={(e) => this.handleClick(e)}

这个语法的问题是,每次 LoggingButton 渲染时都创建一个不同的回调。在多数情况下,没什么问题。然而,如果这个回调被作为 prop(属性) 传递给下级组件,这些组件可能需要额外的重复渲染。我们通常建议在构造函数中进行绑定,以避免这类性能问题。

 

react 中文文档案例三 (开关按钮)的更多相关文章

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

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

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

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

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

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

  4. react 中文文档案例四 (登陆登出按钮)

    import React from 'react'; import ReactDOM from 'react-dom'; class LoginControl extends React.Compon ...

  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. ASP.NET Core 中文文档 第三章 原理(10)依赖注入

    原文:Dependency Injection 作者:Steve Smith 翻译:刘浩杨 校对:许登洋(Seay).高嵩 ASP.NET Core 的底层设计支持和使用依赖注入.ASP.NET Co ...

  8. ASP.NET Core 中文文档 第三章 原理(7)配置

    原文:Configuration 作者:Steve Smith.Daniel Roth 翻译:刘怡(AlexLEWIS) 校对:孟帅洋(书缘) ASP.NET Core 支持多种配置选项.应用程序配置 ...

  9. Logback中文文档(三):配置

    在第一部分,我们将介绍配置 logback 的各种方法,给出了很多配置脚本例子.在第二部分,我们将介绍 Joran,它是一个通用配置框架,你可以在自己的项目里使用 Joran. Logback里的配置 ...

随机推荐

  1. hive与hbase整合方式和优劣

    分别安装hive 和 hbase 1.在hive中创建与hbase关联的表 create table ganji_ranks (row string,num string) STORED BY 'or ...

  2. Eclipse 快键键(持续更新)

    本人抛弃一些简单常见的快键键,例如 ctrl+c   ,+v ,+z之类的 1.ctrl+d 删除一整行 2.ctrl+f 搜索 3.光标选中几行,ctrl+alt+↓ 向下复制选中的那几行 4.光标 ...

  3. JAVA基础知识总结7(抽象类 | 接口)

    抽象类: abstract 1.抽象:不具体,看不明白.抽象类表象体现. 2.在不断抽取过程中,将共性内容中的方法声明抽取,但是方法不一样,没有抽取,这时抽取到的方法,并不具体,需要被指定关键字abs ...

  4. chosen.jquery插件的使用

    前几天在jQuery官网看到了插件里面有400多个插件,看了下效果都很好,以后项目里面难免会用到.于是下了个决定,有时间把官网的插件都研究下,并简单介绍他的用法,方便以后的使用. 下面将要提到的是jQ ...

  5. __get(),__set(),__isset(),__unset()

    __get(),__set(),__isset(),__unset() 在给不可访问属性赋值时,__set()会被调用读取不可访问属性的值时,__get()会被调用 当对不可访问属性调用isset() ...

  6. C++面向对象类的实例题目六

    问题描述: 编写一个程序计算两个给定长方形的面积,其中在设计类成员函数addarea()(用于计算两个长方形的总面积)时使用对象作为参数. 程序代码: #include<iostream> ...

  7. CoreData的增删改查

    首先使用CoreData创建Demo,勾上CoreData选项 然后创建Entity对象,点击Add Entity(+)按钮 生成Entity对象 重命名双击Entity选项,然后输入Person 设 ...

  8. Linux网络服务管理命令

    netstat命令 示例:查看指定的服务是否开启netstat | grep ssh | grep -v grep 网络下载器————wget wget是一个Linux环境下用于从WWW上提取文件的工 ...

  9. Entity Framework Code-First(17):Database Initialization Strategy

    Database Initialization Strategies in Code-First: You already created a database after running your ...

  10. SSH2+proxool 出现No suitable driver found for proxool.mysqlProxool

    SSH2+proxool 出现No suitable driver found for proxool.mysqlProxool 首先我们要明确使用的是SSH2框架,然而Struts2是基于filte ...