这个 React 项目面向初学者。我们将搭建一个温度控制 App,了解 state hook、handle 事件等等。

project-1

尝试自己搭建

如果你想先自己试着写这个项目,可以对照下列项目需求(你也可以参考下方的初始代码):

  • 当用户点击“+”按钮的时候,温度上升
  • 温度不能高于 30℃
  • 当用户点击“-”按钮的时候,温度降低
  • 温度不能低于 0℃
  • 当温度高于 15℃ 的时候,背景色变成红色(我创建了一个样式“hot”)
  • 当温度高于 15℃ 的时候,背景色变成蓝色(我创建了一个样式“cold”)

初始代码

注:本文默认你已经安装好 React 开发环境。

首先在终端运行 create-react-app

npx create-react-app temperature-control

同时在 VS Code(或者别的编辑器)打开项目。删除 index.js 里的内容,然后将以下代码粘贴进这个文件:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
	document.getElementById('root')
);

同样,删除 index.css 的内容,粘贴以下内容:

body {
	font-family: sans-serif;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 100vh;
}

.app-container {
	height: 400px;
	width: 300px;
	background: #2b5870;
	border-radius: 20px;
	box-shadow: 10px 10px 38px 0px rgba(0, 0, 0, 0.75);
}

.temperature-display-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 70%;
}

.temperature-display {
	display: flex;
	border-radius: 50%;
	color: #ffffff;
	height: 220px;
	width: 220px;
	text-align: center;
	justify-content: center;
	align-items: center;
	font-size: 48px;
	border: 3px #ffffff solid;
	transition: background 0.5s;
}

button {
	border-radius: 100px;
	height: 80px;
	width: 80px;
	font-size: 32px;
	color: #ffffff;
	background: rgb(105, 104, 104);
	border: 2px #ffffff solid;
}

button:hover {
	background: rgb(184, 184, 184);
	cursor: pointer;
}

button:focus {
	outline: 0;
}

.button-container {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

.neutral {
	background: rgb(184, 184, 184);
}

.cold {
	background: #035aa6;
}

.hot {
	background: #ff5200;
}

最后,删除 App.js 的内容,粘贴以下代码:

import React from 'react';

const App = () => {
	return (
		<div className='app-container'>
			<div className='temperature-display-container'>
				<div className='temperature-display'>10°C</div>
			</div>
			<div className='button-container'>
				<button>+</button>
				<button>-</button>
			</div>
		</div>
	);
};

export default App;

现在我们可以在 VS Code 打开终端,运行:

npm start

如果一切无误,将显示:

starter

好棒!接下来我们可以基于这个模版搭建了,不用担心 CSS 部分。

动态显示温度值——使用 State

首先我们让温度值动态显示。将温度值存储在 state 内,便于我们稍后读取数据,并用于逻辑呈现。

建议把引起 UI 改变的东西都放在 state 里。

App.js 文件开头导入 useState hook:

import React, { useState } from 'react';

App function 函数内添加:

const [temperatureValue, setTemperatureValue] = useState(10);

我们通过 useState 进行组件状态管理。useState hook 包含两个参数:

  • 一个表示状态初始值的变量
  • 一个更新状态值的函数

在这个例子中,我们调用了状态变量 temperatureValue 和函数 setTemperatureValue,将 10 这个值传递给 useState hook,作为 temperatureValue 的初始值。

现在我们把这个状态值用到代码里。记住了,我们从 useState 获取的值的用法和其他 JavaScript 变量和函数的用法一样。

将 JSX 里的固定的温度值改为状态变量。这是原来的值:

<div className='temperature-display'>10°C</div>

改成这样:

<div className='temperature-display'>{temperatureValue}°C</div>

注意我们使用 {} 来渲染 temperatureValue 变量。现在,如果温度值改变,组件将重新渲染,显示新的温度值。

App.js 文件目前是这样的:

import React, { useState } from 'react';

const App = () => {
	const [temperatureValue, setTemperatureValue] = useState(10);

	return (
		<div className='app-container'>
			<div className='temperature-display-container'>
				<div className='temperature-display'>{temperatureValue}°C</div>
			</div>
			<div className='button-container'>
				<button>+</button>
				<button>-</button>
			</div>
		</div>
	);
};

export default App;

现在,如果你运行 app,浏览器中的一切好像跟之前一样。

但是,如果你将传递给 useState hook 的初始值从 10 改为其他(比如 15),你会看到 app 更新了,也就是说状态钩子起作用了!

按键时更改状态

接下来,我们要在按按钮时升高或降低温度。

useState hook 有一个 setTemperatureValue 函数,可以修改温度值,所以我们可以在按钮的 onClick 事件中用到它。

首先把“+”按钮的代码修改成:

<button onClick={() => setTemperatureValue(temperatureValue + 1)}>+</button>

注意它是怎么调用 setTemperatureValue 函数的。获得当前温度值,加上 1,然后将其作为参数传递。

因为温度初始值是 10,加上 1 的话状态值就变成 11。再按一次按钮,状态值变成 12......

将“-”按钮的代码修改成:

<button onClick={() => setTemperatureValue(temperatureValue - 1)}>-</button>

和对“+”按钮的操作类似,不过这次是降低温度值。

现在我们的代码是这样的:

import React, { useState } from 'react';

const App = () => {
	const [temperatureValue, setTemperatureValue] = useState(10);

	return (
		<div className='app-container'>
			<div className='temperature-display-container'>
				<div className='temperature-display'>{temperatureValue}°C</div>
			</div>
			<div className='button-container'>
				<button onClick={() => setTemperatureValue(temperatureValue + 1)}>+</button>
				<button onClick={() => setTemperatureValue(temperatureValue - 1)}>-</button>
			</div>
		</div>
	);
};

export default App;

试着在浏览器运行代码,点击按钮,温度值会升高或降低。

基于状态修改颜色

接下来我们做点有意思的东西——根据温度的高低显示不同的背景色。

如果温度是 15℃ 或以上,背景色是红色;反之,背景色是蓝色。

在 CSS 里,我写了这两个类:

  • .cold 将背景色设置为蓝色
  • .hot 将背景色设置为红色

将其中一个类添加至 temperature display div,会改变背景色,比如:

<div className='temperature-display cold'>{temperatureValue}°C</div>

背景色是蓝色

<div className='temperature-display hot'>{temperatureValue}°C</div>

背景色是红色

那么,怎么基于状态动态地应用这两个类呢?

创建另一个状态钩子,存放 temperatureColor

const [temperatureColor, setTemperatureColor] = useState('cold');

注意我们给 temperatureColor 状态对象设置初始值为 “cold”(因为初始温度值为 10,我们希望背景色是蓝色)。

然后我们使用模板常量动态地添加需要的类:

<div className={`temperature-display ${temperatureColor}`}>{temperatureValue}°C</div>

这样一来,创建一个字符串,动态应用 temperatureColor 变量。当 temperatureColor 变成 “hot” 的时候,组件会重新渲染,给 className  字符串添加 “hot” 类。

我们的代码目前是这样的:

import React, { useState } from 'react';

const App = () => {
	const [temperatureValue, setTemperatureValue] = useState(10);
	const [temperatureColor, setTemperatureColor] = useState('cold');

	return (
		<div className='app-container'>
			<div className='temperature-display-container'>
				<div className={`temperature-display ${temperatureColor}`}>{temperatureValue}°C</div>
			</div>
			<div className='button-container'>
				<button onClick={() => setTemperatureValue(temperatureValue + 1)}>+</button>
				<button onClick={() => setTemperatureValue(temperatureValue - 1)}>-</button>
			</div>
		</div>
	);
};

export default App;

将初始 temperatureColor 状态变量改为 “hot” 或 “cold”,显示板的背景色随之改变。

我们已经有一个 onClick 事件可更改 temperatureValue 的值,现在我们给这个事件增加新的逻辑。

目前 onClick 事件有一个内联函数。对于单行函数来说用内联函数比较好。但是如果是有不同逻辑的多行函数,最好是将函数放到 JSX 外面,让代码更清晰。

将下列代码粘贴到状态下面:

const increaseTemperature = () => {
	setTemperatureValue(temperatureValue + 1);
};

const decreaseTemperature = () => {
	setTemperatureValue(temperatureValue - 1);
};

这里我们定义了两个函数,用于升高或降低温度。

接下来,修改按钮的 onClick 属性,调用这些函数:

    <button onClick={increaseTemperature}>+</button>
    <button onClick={decreaseTemperature}>-</button>

我们的代码目前是这样:

import React, { useState } from 'react';

const App = () => {
	const [temperatureValue, setTemperatureValue] = useState(10);
	const [temperatureColor, setTemperatureColor] = useState('cold');

	const increaseTemperature = () => {
		setTemperatureValue(temperatureValue + 1);
	};

	const decreaseTemperature = () => {
		setTemperatureValue(temperatureValue - 1);
	};

	return (
		<div className='app-container'>
			<div className='temperature-display-container'>
				<div className={`temperature-display ${temperatureColor}`}>{temperatureValue}°C</div>
			</div>
			<div className='button-container'>
				<button onClick={increaseTemperature}>+</button>
				<button onClick={decreaseTemperature}>-</button>
			</div>
		</div>
	);
};

export default App;

注意其实没啥改变,我们只是重新构造了代码,为接下来的工作做准备。

现在就更容易为点击按钮事件添加逻辑了。

increaseTemperature 函数添加逻辑:

const increaseTemperature = () => {
	const newTemperature = temperatureValue + 1;
	setTemperatureValue(newTemperature);

	if (newTemperature >= 15) {
		setTemperatureColor('hot');
	}
};

当我们点击按钮若干次,temperatureValue 等于或大于 15℃ 时,temperatureColor 变量会更改,组件重新渲染,给显示板添加 “hot” 类。

降低温度时的逻辑是类似的:

const decreaseTemperature = () => {
	const newTemperature = temperatureValue - 1;
	setTemperatureValue(newTemperature);
	if (newTemperature < 15) {
		setTemperatureColor('cold');
	}
};

app 最终的代码如下:

import React, { useState } from 'react';

const App = () => {
	const [temperatureValue, setTemperatureValue] = useState(10);
	const [temperatureColor, setTemperatureColor] = useState('cold');

	const increaseTemperature = () => {
		const newTemperature = temperatureValue + 1;
		setTemperatureValue(newTemperature);

		if (newTemperature >= 15) {
			setTemperatureColor('hot');
		}
	};

	const decreaseTemperature = () => {
		const newTemperature = temperatureValue - 1;
		setTemperatureValue(newTemperature);
		if (newTemperature < 15) {
			setTemperatureColor('cold');
		}
	};

	return (
		<div className='app-container'>
			<div className='temperature-display-container'>
				<div className={`temperature-display ${temperatureColor}`}>{temperatureValue}°C</div>
			</div>
			<div className='button-container'>
				<button onClick={increaseTemperature}>+</button>
				<button onClick={decreaseTemperature}>-</button>
			</div>
		</div>
	);
};

export default App;

运行 app,检查是不是一切 ok——太棒了!

挑战

你可能注意到这个温度控制 app 不是很安全——用户可能把温度升高到 100℃,或者降低到零下 100℃,简直太危险了!

如果你想挑战一下的话,可以给它设置温度限制,零下 30℃ 到 30℃。

提示:给 increaseTemperaturedecreaseTemperature 函数添加逻辑。

原文:How to Build a Temperature Control App in React – Tips and Starter Code Included,作者:Chris Blakely