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

Posted on by

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

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：