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. mysql sequelize 聚合

    User.findAll({attributes: [[sequelize.fn('COUNT', sequelize.col('*')), 'email']],raw: true }).then(f ...

  2. go build 命令

    go build命令简介 1.用于编译源码文件或代码包 2.编译非命令源码文件不会产生任何结果文件 3.编译命令源码文件会在该命令的执行目录中生成一个可执行文件 4.执行该命令切不追加任何参数时,他会 ...

  3. 03 MD5加密、Base64处理

    1 什么是MD5 信息摘要算法,可以将字符进行加密,每个加密对象在进行加密后都是等长的 应用场景:将用户密码经过MD5加密后再存储到数据库中,这样即使是超级管理员也没有能力知道用户的具体密码是多少:因 ...

  4. HDOJ 1196 Lowest Bit

    题目大意是给一个1-100的整数,要求首先转化成2进制,然后从最低位开始数起到不是0的位停止,输出这些位代表队额10进制数 #include <iostream> using namesp ...

  5. kindeditor坑

    用document.getElementById("form1").submit提交,存在缓存问题,经常接收不到textarea数据

  6. java快排(两种方法)

    快排是最基础的排序算法之一,今天来回顾一下. public class QuickSort { public static void quickSort(int[] array){ if(array ...

  7. kaggle Titanic

    # coding: utf-8 # In[19]: # 0.78468 # In[20]: import numpy as np import pandas as pd import warnings ...

  8. Google androd性能优化经典

    2015年伊始,Google发布了关于Android性能优化典范的专题,一共16个短视频,每个3-5分钟,帮助开发者创建更快更优秀的Android App.课程专题不仅仅介绍了Android系统中有关 ...

  9. Java50道经典习题-程序37 报数

    题目:有n个人围成一圈,顺序排号.从第一个人开始报数(从1到3报数),凡报到3的人退出圈子,问最后留下的是原来第几号的那位.分析:最后留下的是第n号那位 import java.util.Scanne ...

  10. easyui 插入中间行

    function inserrow() { var index_dx = 0; var index_lt = 0; var rows = $('#dg').datagrid('getRows')//获 ...