「全端挑战」製作动态网站第一步从了解useState与它的用法开始

铁人赛 Day5 自己做一个价值几十万的动态网站

第五课：了解useState与完成在SearchBar与其介面上part1

前情提要，前两天Day3~4我们完成了简单的navbar与header，现在我们除了排版要开始来做一些使用者功能，所以製作SearchBar我们要先做UI并加上功能，但可以先来破题了解什么是useState。
如想先看部分完成样子
首页UI完成连接，进度为目前（Day5~8左右）

useState hook与React Hook

useState顾名思义，就是在操作与state状态有关的函数，hook的开发目的是官方为了解决class旧版的函数写法问题，才创造了hook，hook的名词解释也很有意思，Hook 中文名子是勾子，React 使用了hook来表示一个会勾东西的动作的函数，本作者将它解释为可以在浏览器都有一个localstage的感觉，在component里面有都会有一个暂存器或是说叫做一个state状态，可以把网页上的操作勾到暂存器里面，也可以把暂存器的data勾出来到网页更新资讯re-render，所以useState就像你在component里设立一个小型的资料库里面可以放各种你想放的资讯、如开关的按钮的true or false，到你想纪录的使用者操作资料。

这个操作就对动态网站非常重要，到后面会有更多的fetchData利用redux或是contextApi其实都是这种勾来勾去的放大版，所以练好了useState就可以用这样的概念，迈进更大的data转换扩大你的动态网站！
下列是介绍useState常见写法，useState是react lib所以使用前也是要记得import且这边要注意是上面图有写到useState是写在component里面的意思是 也就是rafce召唤出来以后，在const component名=()=>写在arrow function与return之间那边，来代表是放在这个component的暂存器

import React, { useState } from 'react'//记得导入const index = () => {const [item, setItem] = useState("");//只能写大括号{}里面且在return上面return ( <div>index</div> )}export default index

下面三个是範例

const [destination, setDestination] = useState("");const [openConditions, setOpenConditions] = useState(false);const [openCalendar, setOpenCalendar] = useState(false);

你会发现有命名的原则，const 会const 一个[]代表const一个array,
前面会摆state或是你可以记暂存器资料，后面是改变state的函数，所以加了一个set，且set后面第一个字母会大写，命名方式就像骆驼命名的感觉（camel notation)，除了set是固定要加，其他都是可以自由命名的，这边也要小心=useState()是固定用法，代表"使用State"，useState()，小括号里面装的是起始值，你可以写null，数字，boolean都可以，暂存器必须都先给它，你想要一开始宣告它的值，像是上面用到的false就是Boolean type可以用click这个动作来切换装态从false到true这样，就可以有下面的点击跳出视窗反应这样等等的，就是如果状态是true 显示这个区块，如果没有就消失，就像跳出视窗一样，这边也就会用到react的if else写法，之后会讲的? : 一个问号跟冒号所组成的超随便写法来代表if跟else

useState的抓取state与上传更新state

讲完比较好背的useState固定用法，要来讲的抓取state与上传更新state
一般来说来说抓取state非常简单你只要在下方div 中引入{data} 就可以
如下图

更改state与上传state必须要用useState()函数的方式，比如说更改Boolean值，从true变成false，false变成true，或是直接在里面输入想要得值，如接input用户输入进去得地址等等的，相对会複杂很多，之后也会重点实作这部分
比如说

onClick={() => setOpenCalendar(!openCalendar)}

(!openCalendar)!表示使变数资料相反 从true变成false，false变成true得概念
这边直接举会实作的useState搭配calendar内容

这边就大略介绍完useState了，接下来所以接续前两天结果，我们要套用在实作内，所以首先先来完成UI设计

订房网Header SearchBar製作

来完成SearchBar UI设计并在之后使他有功能

并在headerSearchBar里面打上打上三个SearchBarItem
并在个别中放入icon与文字，然后可以先都打上自己想要命名的classname
这边记得每在新的component里用一次FontAwesomeIcon都要import，{faBed}也是

<div className="headerSearchBar"> <div className="SearchBarItem"> <FontAwesomeIcon icon={faBed} /> <input type="Search" placeholder='你要去哪里？' className='SearchInput' /> </div> <div className="SearchBarItem"> <FontAwesomeIcon icon={faCalendar} /> <span className="SearchText" >08/16/2022-08/16/2022</span> </div> <div className="SearchBarItem"> <FontAwesomeIcon icon={faPeopleGroup} /> <span className="SearchText" >3位成人 · 2 位小孩 · 1 间房</span> </div> <button className='SearchBarBtn' >搜寻</button></div>

这边可以练习的有input type="search" 跟type="text"意思差不多 下面有相关连结可以多练习input type
https://www.w3schools.com/html/html_form_input_types.asp
熟悉后这边placeholder='你要去哪里？' 就可以知道是预设字，还没有输入的预设字行

<input type="Search" placeholder='你要去哪里？'/>`

搞定后这边应该会长这样
因还没有scss排版所以会自然div往下排

所以稍微快速scss排版可以打巢状里面，或如觉得太乱或是巢状太大可以打在外面，这边是程式码

header.scss的.headerSearchBar.headerSearchBar { height: 55px;//设定SearchBar高度 width: 95%;//原本设100%虽然此本专案没有做到RWD网页 但发现他超过太夸张修正为95% max-width: 1024px;//这边一样会希望他能不要太宽 所以最宽1024px display: flex;//打上df 让这边的都可以横着排 align-items: center;//df 后可以打aic让他上下置中 background-color: rgb(223, 130, 0); //这边会特别下面图层讲解 border: none; border-radius: 5px;//让他有圆圆角 svg { color: lightgray; //特别注意这边fontawsome是svg档 font-size: 24px; //所以可以在这边控制全部icon属性 margin-left: 10px; } input { border: none; //输入栏这边下面也会特别说 outline: none; width: 100%; font-size: 16px; text-overflow: ellipsis; //特殊用法要搭配下面width }//他字数超过框框时可以从“你要去哪里？”变成“你要去...”这样就不会超出版型 .SearchBarItem:first-child {//第一个SearchBarItem width: calc(34% - 20px);//加上这个，可以让”你要去哪里“缩小的比别人快 } .SearchBarItem { height: 50px;//这边高度我设略小于上面headerSearchBar55px的50px width: 320px;//宽大约抓最大宽1024px的三等份之类的 略小情况下面表示 margin-left: 2px;//Item直接的空隙 display: flex; align-items: center; gap: 10px;//Item里面中icon 与input 或是 text的间距 color: black; background-color: #fff;//栏位颜色 border-radius: 2px; cursor: pointer;//让他们触控时鼠标会变颜色 } .SearchBarBtn {//最后就基本btn设计 border: none; margin: 0px 2px 0px 2px; width: 60px; height: 50px; border-radius: 2px; background-color: var(--primary-color); //有问题的记得去看app.scss里面有没有放:root{变色主色调那边} 可以看前几天的文章 color: white; cursor: pointer; }} SearchBar,BarItem,input图层上下关係与栏位

下图来表示上述scss叠图方式

接下来完成好SearchBar就可以将它移动到绿色与白色中间，为了跳脱原本container的框架，到container以外 我们使用绝对定位座标
让SearchBar位置position:absolute 但使用这个要配上
header打上position:relative
.header{}新增这条

position:relative;

才能将座标定位範围还在header里面
不然会是以整个页面的定位为主，如果你打上座标top:0就会在网页最上面
bottom:0会直接飞到网页最下面，可以自己动手试试看


完整后会长下面这样，我们明天可以开始进到主题功能性网站

结论

这边明天跟今天的内容量其实是3:1，原本是想要平分，但因为想要坚持在了解与实作不同的主题，所以实作上内容必定比较多，所以之后的网站平均都会在这些量之间，都会有点爆量，并希望能整个讲到后台部分，但因为原本自己排的版本是5版10篇，但后来是5版15篇，大部分是因为每篇内容都太多XD所以希望大家能有耐心看完

标签： #useState #component #state