react 中文文档案例七 (温度计)
const scaleNames = {
c: 'Celsius',
f: 'Fahrenheit'
}; function toCelsius(fahrenheit) {
return (fahrenheit - ) * / ;
} function toFahrenheit(celsius) {
return (celsius * / ) + ;
} function tryConvert(temperature, convert) {
const input = parseFloat(temperature);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * ) / ;
return rounded.toString();
} function BoilingVerdict(props) {
if (props.celsius >= ) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>;
} class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
} handleChange(e) {
this.props.onTemperatureChange(e.target.value);
} render() {
const temperature = this.props.temperature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNames[scale]}:</legend>
<input
value={temperature}
onChange={this.handleChange} />
</fieldset>
);
}
}
class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
this.state = {temperature: '', scale: 'c'};
} handleCelsiusChange(temperature) {
this.setState({scale: 'c', temperature});
} handleFahrenheitChange(temperature) {
this.setState({scale: 'f', temperature});
} render() {
const scale = this.state.scale;
const temperature = this.state.temperature;
const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
return (
<div>
<TemperatureInput
scale="c"
temperature={celsius}
onTemperatureChange={this.handleCelsiusChange} />
<TemperatureInput
scale="f"
temperature={fahrenheit}
onTemperatureChange={this.handleFahrenheitChange} />
<BoilingVerdict
celsius={parseFloat(celsius)} />
</div>
);
}
} ReactDOM.render(
<Calculator />,
document.getElementById('root')
);
react 中文文档案例七 (温度计)的更多相关文章
- react 中文文档案例三 (开关按钮)
开关按钮制作 import React from 'react'; import ReactDOM from 'react-dom'; class Toggle extends React.Com ...
- react 中文文档案例六 (表单)
class Reservation extends React.Component { constructor(props) { super(props); this.state = { isGoin ...
- react 中文文档案例五 (循环列表)
function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) = ...
- react 中文文档案例四 (登陆登出按钮)
import React from 'react'; import ReactDOM from 'react-dom'; class LoginControl extends React.Compon ...
- react 中文文档案例二 (头像时间)
import React from 'react'; import ReactDOM from 'react-dom'; function formatDate(date) { return date ...
- react 中文文档案例一 (倒计时)
1.函数试组件 import React from 'react'; import ReactDOM from 'react-dom'; function Clock(props){ return( ...
- phpspreadsheet 中文文档(七)技巧和诀窍
2019年10月11日14:08:35 以下页面为您提供了一些使用广泛的PhpSpreadsheet食谱.请注意,这些文件没有提供有关特定PhpSpreadsheet API函数的完整文档,而只是一个 ...
- talib 中文文档(七):Overlap Studies Functions
Overlap Studies Functions 重叠指标 BBANDS - Bollinger Bands 函数名:BBANDS 名称: 布林线指标 简介:其利用统计原理,求出股价的标准差及其信赖 ...
- phpspreadsheet 中文文档 粗翻版
2019年10月11日09:32:33 官方使用文档 https://phpspreadsheet.readthedocs.io/en/stable/topics/accessing-cells/ ...
随机推荐
- 阿里云服务器ubuntu安装redis2.8.13
阿里云服务器ubuntu安装redis2.8.13 2014-09-04 16:14 | coding云 | 2198次阅读 | 暂无评论 一.下载redis 可以先下载到本地,然后ftp到服 ...
- 部署和调优 2.2 squid反向代理
配置反向代理 打开配置文件 vim /etc/squid/squid.conf 修改 http_port 改为 http_port 80 accel vhost vport 在它下面添加一段 cach ...
- Samba服务学习报错总结
1 2 3 4 5 此文献来至百度文库 http://wenku.baidu.com/link?url=hkHembjXcjoYRU9ky34a46Lzv5SAEutwa0v1_F8INQsdg_KK ...
- intellij idea 在执行maven的操作 install等会出现中文乱码?其他程序打印正常?
之前一直碰到过这个问题,也没在意,因为那个中文对我来说用处不大,今天看着务必难受,一定把他给解决了,查了一下,找到了解决方法,如下: 首先打开你的设置. Setting->maven->r ...
- Elasticsearch - 环境准备
Precondition: Ubuntu OS 环境准备: 1. JAVA_HOME 1.1 Download the jdk8 (jdk-8u25-linux-x64.tar.gz) from of ...
- Django 链接数据库错误 Strick Mode 解决
报错信息: WARNINGS:?: (mysql.W002) MySQL Strict Mode is not set for database connection ‘default‘HINT: M ...
- c语言中会遇到的面试题
预处理器(Preprocessor) 1 . 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题) #define SECONDS_PER_YEAR (60 ...
- Entity Framework Tutorial Basics(19):Change Tracking
Change Tracking in Entity Framework: Here, you will learn how entity framework tracks changes on ent ...
- 更新anaconda及所有包
################################## # 更新Anaconda conda update conda # 更新所有包 conda update --all ###### ...
- [译]在Javascript中进行日期相关的操作
本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...