日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

使用React組件編寫溫度顯示器_React

作者：攻城獅plus ? 更新時間： 2022-10-23 編程語言

本文實例為大家分享了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;
}

原文鏈接：https://blog.csdn.net/yinge0508/article/details/114142078

欄目分類
最近更新