使用React组件编写温度显示器

本文实例为大家分享了React组件编写温度显示器的具体代码,供大家参考,具体内容如下

这是模拟了一下温度显示器的效果,先看效果:

先在页面中引入React等;

import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; // 页面的样式文件

开发过程是这样的:

首先定义一个BoillingVerdict组件,用来显示温度显示器的(样式先不写,在后面一起上代码)(温度显示器上的数字不是温度;),

// 显示温度计算器文字的函数组件(最高300摄氏度) function BoillingVerdict(props) {   return (     <div className="outer">       <div className="inner" style={{ height: props.height + "%", background: props.bg, }} >         {props.height}       </div>     </div>   ); }

然后,创建一个名为 Calculator 的组件,用于渲染  '控制温度的输入框' 和 温度显示器组件,

class Calculator extends React.Component {   // 构造函数,可以用于初始化state   constructor(props) {     super(props);     this.state = {       temperature: 0, // 温度       tempHeight: 0, // 温度显示器背景色高度       bg: "#fff", // 温度显示器颜色     };     // 为tempChange方法绑定this,否则该方法中拿不到this     this.tempChange = this.tempChange.bind(this);   }   tempChange(e) {     // 判断温度值大小来设置颜色     var colors =       Number(e.target.value) > 90 ? "#0F1CED" : Number(e.target.value) > 80 ? "#D5D70B" :       Number(e.target.value) > 70 ? "#0BD737" : Number(e.target.value) > 60 ? "#0BD7CA" :       Number(e.target.value) > 50 ? "#ED194B" : Number(e.target.value) > 40 ? "#AE1FD2" :       Number(e.target.value) > 30 ? "skyblue" : Number(e.target.value) > 20 ? "blue" :       Number(e.target.value) > 10 ? "orange" : "#671552";     var height = (Number(e.target.value) / 3).toFixed(2);     this.setState({       temperature: e.target.value,       tempHeight: height,       bg: colors,     });   }   render() {     return (       <fieldset>         <legend> 温度: </legend>         <input value={this.state.temperature} onChange={this.tempChange} type="number" > </input>         <BoillingVerdict height={this.state.tempHeight} bg={this.state.bg}></BoillingVerdict>       </fieldset>     );   } }

然后渲染:

ReactDOM.render(<Calculator></Calculator>,document.getElementById("root12"));

index.css

.outer{   width:80px;   height:300px;   border:1px solid black;   border-radius: 20px;   overflow: hidden;   background:#fff;   margin-top:10px;   position:relative;   text-align: center; } .inner{   position:absolute;   bottom:0;height:200px;   background:#fff;   width:100%;   background:blue;   text-align: center;   transition: all 1s; }

推荐阅读