使用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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
react 路由权限动态菜单方案配置react-router-auth-plus
这篇文章主要为大家介绍了react路由权限动态菜单方案react-router-auth-plus傻瓜式配置详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-08-08详解在React.js中使用PureComponent的重要性和使用方式
这篇文章主要介绍了详解在React.js中使用PureComponent的重要性和使用方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-07-07React styled components样式组件化使用流程
styled-components 是react的一个第三方库,一种css私有化的方式。用来实现CSS in JS 的方式之一。在多人协作中,css必定会出现命名冲突,与vue的scoped解决方案不同,react用styled-components的给类名加了随机字符的方式实现了css的私有化2023-02-02详解React中的useMemo和useCallback的区别
React中的useMemo和useCallback是两个重要的Hooks。常常被用于优化组件的性能。虽然这两个Hooks看起来很相似,但它们彼此之间还是有很大的区别的,随着小编一起来学习吧2023-04-04
最新评论