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 中文文档案例七 (温度计)的更多相关文章

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

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

  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. phpspreadsheet 中文文档(七)技巧和诀窍

    2019年10月11日14:08:35 以下页面为您提供了一些使用广泛的PhpSpreadsheet食谱.请注意,这些文件没有提供有关特定PhpSpreadsheet API函数的完整文档,而只是一个 ...

  8. talib 中文文档(七):Overlap Studies Functions

    Overlap Studies Functions 重叠指标 BBANDS - Bollinger Bands 函数名:BBANDS 名称: 布林线指标 简介:其利用统计原理,求出股价的标准差及其信赖 ...

  9. phpspreadsheet 中文文档 粗翻版

    2019年10月11日09:32:33 官方使用文档  https://phpspreadsheet.readthedocs.io/en/stable/topics/accessing-cells/ ...

随机推荐

  1. 阿里云服务器ubuntu安装redis2.8.13

    阿里云服务器ubuntu安装redis2.8.13 2014-09-04 16:14 |  coding云 |  2198次阅读 | 暂无评论   一.下载redis 可以先下载到本地,然后ftp到服 ...

  2. 部署和调优 2.2 squid反向代理

    配置反向代理 打开配置文件 vim /etc/squid/squid.conf 修改 http_port 改为 http_port 80 accel vhost vport 在它下面添加一段 cach ...

  3. Samba服务学习报错总结

    1 2 3 4 5 此文献来至百度文库 http://wenku.baidu.com/link?url=hkHembjXcjoYRU9ky34a46Lzv5SAEutwa0v1_F8INQsdg_KK ...

  4. intellij idea 在执行maven的操作 install等会出现中文乱码?其他程序打印正常?

    之前一直碰到过这个问题,也没在意,因为那个中文对我来说用处不大,今天看着务必难受,一定把他给解决了,查了一下,找到了解决方法,如下: 首先打开你的设置. Setting->maven->r ...

  5. Elasticsearch - 环境准备

    Precondition: Ubuntu OS 环境准备: 1. JAVA_HOME 1.1 Download the jdk8 (jdk-8u25-linux-x64.tar.gz) from of ...

  6. Django 链接数据库错误 Strick Mode 解决

    报错信息: WARNINGS:?: (mysql.W002) MySQL Strict Mode is not set for database connection ‘default‘HINT: M ...

  7. c语言中会遇到的面试题

    预处理器(Preprocessor) 1 . 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题)         #define SECONDS_PER_YEAR (60 ...

  8. Entity Framework Tutorial Basics(19):Change Tracking

    Change Tracking in Entity Framework: Here, you will learn how entity framework tracks changes on ent ...

  9. 更新anaconda及所有包

    ################################## # 更新Anaconda conda update conda # 更新所有包 conda update --all ###### ...

  10. [译]在Javascript中进行日期相关的操作

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...