「全端挑战」製作动态网站第一步从了解useState与它的用法开始
铁人赛 Day5 自己做一个价值几十万的动态网站
第五课:了解useState与完成在SearchBar与其介面上part1
前情提要,前两天Day3~4我们完成了简单的navbar与header,现在我们除了排版要开始来做一些使用者功能,所以製作SearchBar我们要先做UI并加上功能,但可以先来破题了解什么是useState。
如想先看部分完成样子
首页UI完成连接,进度为目前(Day5~8左右)
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的暂存器
下面三个是範例
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
一般来说来说抓取state非常简单你只要在下方div 中引入{data} 就可以
如下图
更改state与上传state必须要用useState()函数的方式,比如说更改Boolean值,从true变成false,false变成true,或是直接在里面输入想要得值,如接input用户输入进去得地址等等的,相对会複杂很多,之后也会重点实作这部分
比如说
(!openCalendar)!表示使变数资料相反 从true变成false,false变成true得概念
这边直接举会实作的useState搭配calendar内容
这边就大略介绍完useState了,接下来所以接续前两天结果,我们要套用在实作内,所以首先先来完成UI设计
订房网Header SearchBar製作来完成SearchBar UI设计并在之后使他有功能
并在headerSearchBar里面打上打上三个SearchBarItem
并在个别中放入icon与文字,然后可以先都打上自己想要命名的classname
这边记得每在新的component里用一次FontAwesomeIcon都要import,{faBed}也是
这边可以练习的有input type="search" 跟type="text"意思差不多 下面有相关连结可以多练习input type
https://www.w3schools.com/html/html_form_input_types.asp
熟悉后这边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{}新增这条
才能将座标定位範围还在header里面
不然会是以整个页面的定位为主,如果你打上座标top:0就会在网页最上面
bottom:0会直接飞到网页最下面,可以自己动手试试看
完整后会长下面这样,我们明天可以开始进到主题功能性网站
这边明天跟今天的内容量其实是3:1,原本是想要平分,但因为想要坚持在了解与实作不同的主题,所以实作上内容必定比较多,所以之后的网站平均都会在这些量之间,都会有点爆量,并希望能整个讲到后台部分,但因为原本自己排的版本是5版10篇,但后来是5版15篇,大部分是因为每篇内容都太多XD所以希望大家能有耐心看完