使用React組件編寫溫度顯示器
更新時間：2022年08月26日 14:34:32 作者：攻城獅plus
這篇文章主要為大家詳細介紹了使用React組件編寫溫度顯示器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了React組件編寫溫度顯示器的具體代碼，供大家參考，具體內容如下
這是模擬了一下溫度顯示器的效果，先看效果：
先在頁面中引入React等；
import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; // 頁面的樣式文件
開發(fā)過程是這樣的：
首先定義一個BoillingVerdict組件，用來顯示溫度顯示器的（樣式先不寫，在后面一起上代碼）(溫度顯示器上的數(shù)字不是溫度；)，
// 顯示溫度計算器文字的函數(shù)組件(最高300攝氏度)
function BoillingVerdict(props) {
? return (
? ? <div className="outer">
? ? ? <div className="inner" style={{ height: props.height + "%", background: props.bg, }} >
? ? ? ? {props.height}
? ? ? </div>
? ? </div>
? );
}然后，創(chuàng)建一個名為 Calculator 的組件，用于渲染 '控制溫度的輸入框' 和 溫度顯示器組件，
class Calculator extends React.Component {
? // 構造函數(shù)，可以用于初始化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-native使用leanclound消息推送的方法
這篇文章主要介紹了react-native使用leanclound消息推送的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
React實現(xiàn)錨點跳轉組件附帶吸頂效果的示例代碼
這篇文章主要為大家詳細介紹了React如何實現(xiàn)移動端錨點跳轉組件附帶吸頂效果，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下2023-01-01
本篇文章主要介紹了React組件生命周期，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要給大家介紹了關于react中組件通信的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-12-12
這篇文章主要介紹了react獲取input輸入框的值的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
錯誤邊界是一種React組件,這種組件可以捕獲發(fā)生在其子組件樹任何位置的JavaScript錯誤,并打印這些錯誤,同時展示降級UI,而并不會渲染那些發(fā)生崩潰的子組件樹2022-12-12
很多朋友在安裝插件ES7 React/Redux/GraphQL/React-Native snippets還是不能完全支持jsx語法，糾結是什么原因呢，該如何處理呢，下面小編給大家分享本文幫助大家解決React-vscode使用jsx語法問題，感興趣的朋友一起看看吧2021-06-06
useSWR 是一個 React Hooks,是 HTTP 緩存庫 SWR 的核心方法之一,SWR 是一個輕量級的 React Hooks 庫,通過自動緩存數(shù)據(jù)來實現(xiàn) React 的數(shù)據(jù)獲取,本文給大家介紹react:swr接口緩存案例詳解,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了React?echarts?組件的封裝,本文通過示例代碼給大家介紹的非常詳細,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了詳解antd+react項目遷移vite的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04