一站式做网站,企业简介模板ppt,舆情报告2023,前端网站开发工具实战
React表单组件
入门
重点在于change的时候改变state的值#xff0c;类似vue的双向数据绑定v-model#xff0c;即数据更新的时候页面同步更新#xff0c;页面数据更新时数据源也能获得最新的值#xff0c;只是Vue中设置在data中的属性默认绑定#xff0c;React中需…实战
React表单组件
入门
重点在于change的时候改变state的值类似vue的双向数据绑定v-model即数据更新的时候页面同步更新页面数据更新时数据源也能获得最新的值只是Vue中设置在data中的属性默认绑定React中需要state触发页面更新
使用原先较多测试组件的项目写基础
input组件
import React, { useState, ChangeEvent } from react;
// 上下两种引入方式都可以
// import type { ChangeEvent } from react;function App() {const [text, setText] useStatestring(hello);function handleChange(event: ChangeEventHTMLInputElement) {// event.target.value就是当前input的值setText(event.target.value);}return (divinput defaultValue{text} onChange{handleChange} /button onClick{() console.log(text)}打印/button/div);
}export default App;
受控组件值同步到state使用value属性可获可控非受控组件值不同步到state使用defaultValue属性能够设置默认值但是无法获得更改后最新的数值React推荐使用受控组件看似繁琐没有规律但更加可控有规律可读
textarea组件
function App() {const [text, setText] useStatestring(hello);function handleChange(event: ChangeEventHTMLTextAreaElement) {// event.target.value就是当前input的值setText(event.target.value);}function genHtml() {return { __html: text.replaceAll(\n, br) };}return (div{/* input defaultValue{text} onChange{handleChange} / */}textarea value{text} onChange{handleChange}/textarea{/* {text.replaceAll(\n, br)} */}{/* 上面这个方法中为了防止XSS注入React会将br换成明文展示在页面而不是换行可以通过下列方式解决 */}p dangerouslySetInnerHTML{genHtml()}/p/div);
}export default App;
radio单选框
function App() {const [gender, setGender] useState(male);function handleChange(event: ChangeEventHTMLInputElement) {// event.target.value就是当前input的值setGender(event.target.value);}return (divlabel htmlForradio1男/labelinputtyperadioidradio1namegendervaluemalechecked{gender male}onChange{handleChange}/label htmlForradio2女/labelinputtyperadioidradio2namegendervaluefemalechecked{gender female}onChange{handleChange}/button onClick{() console.log(gender)}打印/button/div);
}export default App;
checkbox复选
function App() {const [selectedList, setSelectedList] useStatestring[]([]);function handleCityChange(event: ChangeEventHTMLInputElement) {// event.target.value就是当前input的值const city event.target.value;if (selectedList.includes(city)) {setSelectedList(selectedList.filter((c) {if (c city) return false;return true;}),);} else {// 添加setSelectedList(selectedList.concat(city));}}return ({/* htmlFor 点击的时候也会触发切换 */}label htmlForcheckbox1北京/labelinputtypecheckboxidcheckbox1valuebeijingchecked{selectedList.includes(beijing)}onChange{handleCityChange}/label htmlForcheckbox2上海/labelinputtypecheckboxidcheckbox2valueshanghaichecked{selectedList.includes(shanghai)}onChange{handleCityChange}/label htmlForcheckbox3深圳/labelinputtypecheckboxidcheckbox3valueshenzhenchecked{selectedList.includes(shenzhen)}onChange{handleCityChange}/{/* 方便表单获取和提交 */}inputtypehiddennamecityInputvalue{JSON.stringify(selectedList)}//);
}export default App;
select下拉框
function App() {const [lang, setLang] useState(js);function handleChange(event: ChangeEventHTMLSelectElement) {// event.target.value就是当前input的值setLang(event.target.value);}return ({/* 不设置state的话选择了没反应 */}select value{lang} onChange{handleChange}option valuejavaJava/optionoption valueCC/optionoption valuepythonPython/option/select/);
}
form表单组件
function App() {function handleSubmit(event: ChangeEventHTMLFormElement) {event.preventDefault(); // 阻止默认行为即不会提交到action// 可以自行处理提交的逻辑}return ({/* 点击提交后会将相应的数据发送到action中填写的接口。提交的就是name和value */}{/* 没有name没有value的话会导致提交无法识别 */}{/* 隐藏inputtype:hidden的价值就在于可以把想要提交的数据偷偷提交上去 */}{/* onSubmit提交前调用的钩子函数可以阻止默认行为不然点击就直接提交了 */}form action/api/post onSubmit{handleSubmit}input /br /textarea /input typehidden /button typesubmit提交/button/form/);
} Ant Design 实现
为什么地址要添加参数避免刷新的时候搜索数据丢失不保存的话一刷新页面内容就重置了保存了之后就算是刷新由于地址附有参数刷新时地址不会改变所以仍能展示出搜索后的数据
同时也是为了避免组件之间的耦合最好不要一搜索就更新列表组件或者一分页就更新列表组件而是通过一个更加公共的比如地址栏进行搜索或者分页信息的传递也能避免刷新后数据无法保存比如搜索栏一刷新原来的搜索词就没有了但是可以通过从路径获取参数来达到“保存”的效果
新建constants文件夹其中设置index.tsx文件保存常用变量跟router中导出常用变量类似
// 存储所有的常量
export const LIST_SEARCH_PARAM_KEY keyword; 搜索栏组件
ListSearch.tsx
import React, { FC, useEffect, useState } from react;
import { Input } from antd;
import type { ChangeEvent } from react;
import { useNavigate, useLocation, useSearchParams } from react-router-dom;
import { LIST_SEARCH_PARAM_KEY } from ../constants;const { Search } Input;const ListSearch: FC () {const [val, setVal] useState();const nav useNavigate();const { pathname } useLocation();function handleChange(event: ChangeEventHTMLInputElement) {setVal(event.target.value);}function handleSearch(value: string) {// 跳转页面增加URL参数nav({pathname,search: ${LIST_SEARCH_PARAM_KEY}${value},});}// 获取url参数并设置到input valueconst [searchParams] useSearchParams();useEffect(() {// 每当searchParams有变化就执行函数// serchParams用来获得上面nav中设置的参数const newVal searchParams.get(LIST_SEARCH_PARAM_KEY) || ;setVal(newVal);}, [searchParams]);return (SearchallowClearplaceholder请输入关键字value{val}onChange{handleChange}onSearch{handleSearch}style{{ width: 260px }}/);
};
export default ListSearch; 开发注册页
Register.module.scss
.contain{height: 100vh;width: 100vw;display: flex;flex-direction: column;justify-content: center;align-items: center;background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);// background-image: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%);
}
Register.tsx
import React, { FC } from react;
import { Typography, Space, Form, Input, Button } from antd;
import { UserAddOutlined } from ant-design/icons;
import styled from ./Register.module.scss;
import { Link } from react-router-dom;
import { LOGIN_PATHNAME } from ../router;const { Title } Typography;const Register: FC () {// any表示任意类型都可const onFinish (values: any) {console.log(values);};return (div className{styled.contain}divSpaceTitle level{2}UserAddOutlined //TitleTitle level{2}注册新用户/Title/Space/divdivFormlabelCol{{ span: 6 }}wrapperCol{{ span: 16 }}onFinish{onFinish}Form.Item label用户名 nameuserNameInput //Form.ItemForm.Item label密码 namepassWordInput.Password //Form.ItemForm.Item label确认密码 nameconFirmInput.Password //Form.ItemForm.Item label昵称 namenickNameInput //Form.ItemForm.Item wrapperCol{{ offset: 8, span: 16 }}Space{/* htmlType就是之前html里的type只是前面设置属性被占用了用这个一样的效果都是为了触发方法 */}Button typeprimary htmlTypesubmit注册/Button/SpaceLink to{LOGIN_PATHNAME}已有账户,登录/Link/Form.Item/Form/div/div);
};
export default Register;开发登录页
Login.module.scss
.contain{height: 100vh;width: 100vw;display: flex;flex-direction: column;justify-content: center;align-items: center;background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);// background-image: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%);
}
Login.tsx
// 登陆页面
import React, { FC, useEffect } from react;
import { Link, useNavigate } from react-router-dom;
import { Space, Typography, Form, Input, Button, Checkbox } from antd;
import { UserAddOutlined } from ant-design/icons;
import { REGISTER_PATHNAME } from ../router;
import styled from ./Login.module.scss;const { Title } Typography;const USERNAME_KEY USERNAME;
const PASSWORD_KEY PASSWORD;function rememberUser(username: string, password: string) {localStorage.setItem(USERNAME_KEY, username);localStorage.setItem(PASSWORD_KEY, password);
}function deleteUser() {localStorage.removeItem(USERNAME_KEY);localStorage.removeItem(PASSWORD_KEY);
}function getUser() {return {username: localStorage.getItem(USERNAME_KEY),password: localStorage.getItem(PASSWORD_KEY),};
}const Login: FC () {const nav useNavigate();// 第三方hook即第三方提供的组件const [form] Form.useForm();const onFinish (values: any) {const { username, password, remember } values;if (remember) {rememberUser(username, password);} else {deleteUser();}};// 依赖不填写默认在组件渲染完成后执行useEffect(() {const { username, password } getUser();// 这里如果不小心写成了setFieldValue会报错差了个s这个只能输入一个参数有s的才能输入多个form.setFieldsValue({ username, password });}, []);return (div className{styled.contain}divSpaceTitle level{2}UserAddOutlined //TitleTitle level{2}用户登录/Title/Space/divdivFormlabelCol{{ span: 6 }}wrapperCol{{ span: 16 }}onFinish{onFinish}// 默认remember设置为trueinitialValues{{ remember: true }}// 将返回值关联起来即使其变成受控组件form{form}Form.Item label用户名 nameusernameInput //Form.ItemForm.Item label密码 namepasswordInput.Password //Form.ItemForm.ItemnameremembervaluePropNamecheckedwrapperCol{{ offset: 6, span: 16 }}{/* 表单需要有name和value才能提交valuePropname就是将Checkbox的checked属性即选中的属性true || false当作值 */}Checkbox记住我/Checkbox/Form.ItemForm.Item wrapperCol{{ offset: 6, span: 16 }}SpaceButton typeprimary htmlTypesubmit登录/ButtonLink to{REGISTER_PATHNAME}注册新用户/Link/Space/Form.Item/Form/div/div);
};
export default Login; 表单校验
先在注册里进行校验使用的都是antd里form的功能然后复制到登录就行
Register.tsx
// 注册界面
import React, { FC } from react;
import { Typography, Space, Form, Input, Button, message } from antd;
import { UserAddOutlined } from ant-design/icons;
import styled from ./Register.module.scss;
import { Link } from react-router-dom;
import { LOGIN_PATHNAME } from ../router;const { Title } Typography;const Register: FC () {// any表示任意类型都可const onFinish (values: any) {console.log(values);};return (div className{styled.contain}divSpaceTitle level{2}UserAddOutlined //TitleTitle level{2}注册新用户/Title/Space/divdivFormlabelCol{{ span: 6 }}wrapperCol{{ span: 16 }}onFinish{onFinish}Form.Itemlabel用户名nameusernamerules{[{ required: true, message: 请输入用户名 },// string表示按长度计算区间范围不然变成数字就成最小5最大20了{type: string,min: 5,max: 20,message: 字符长度在5-20之间,},{pattern: /^\w$/,message: 只能是字母数字下划线,},]}Input //Form.ItemForm.Itemlabel密码namepassword// required表示必填项会出现红点rules{[{ required: true, message: 请输入密码 }]}Input.Password //Form.ItemForm.Itemlabel确认密码nameconfirm// 依赖password属性password变化会重新触发验证dependencies{[password]}rules{[{ required: true, message: 请确认输入的密码 },// 这个校验传递进去的是一个函数({ getFieldValue }) ({validator(_, value) {if (getFieldValue(password) value) {return Promise.resolve();} else {return Promise.reject(new Error(两次密码不一致));}},}),]}Input.Password //Form.ItemForm.Item label昵称 namenicknameInput //Form.ItemForm.Item wrapperCol{{ offset: 8, span: 16 }}Space{/* htmlType就是之前html里的type只是前面设置属性被占用了用这个一样的效果都是为了触发方法 */}Button typeprimary htmlTypesubmit注册/ButtonLink to{LOGIN_PATHNAME}已有账户,登录/Link/Space/Form.Item/Form/div/div);
};
export default Register;
Login.tsx
// 登陆页面
import React, { FC, useEffect } from react;
import { Link, useNavigate } from react-router-dom;
import { Space, Typography, Form, Input, Button, Checkbox } from antd;
import { UserAddOutlined } from ant-design/icons;
import { REGISTER_PATHNAME } from ../router;
import styled from ./Login.module.scss;const { Title } Typography;const USERNAME_KEY USERNAME;
const PASSWORD_KEY PASSWORD;function rememberUser(username: string, password: string) {localStorage.setItem(USERNAME_KEY, username);localStorage.setItem(PASSWORD_KEY, password);
}function deleteUser() {localStorage.removeItem(USERNAME_KEY);localStorage.removeItem(PASSWORD_KEY);
}function getUser() {return {username: localStorage.getItem(USERNAME_KEY),password: localStorage.getItem(PASSWORD_KEY),};
}const Login: FC () {const nav useNavigate();// 第三方hook即第三方提供的组件const [form] Form.useForm();const onFinish (values: any) {const { username, password, remember } values;if (remember) {rememberUser(username, password);} else {deleteUser();}};// 依赖不填写默认在组件渲染完成后执行useEffect(() {const { username, password } getUser();// 这里如果不小心写成了setFieldValue会报错差了个s这个只能输入一个参数有s的才能输入多个form.setFieldsValue({ username, password });}, []);return (div className{styled.contain}divSpaceTitle level{2}UserAddOutlined //TitleTitle level{2}用户登录/Title/Space/divdivFormlabelCol{{ span: 6 }}wrapperCol{{ span: 16 }}onFinish{onFinish}// 默认remember设置为trueinitialValues{{ remember: true }}// 将返回值关联起来即使其变成受控组件form{form}Form.Itemlabel用户名nameusernamerules{[{ required: true, message: 请输入用户名 },// string表示按长度计算区间范围不然变成数字就成最小5最大20了{type: string,min: 5,max: 20,message: 字符长度在5-20之间,},{pattern: /^\w$/,message: 只能是字母数字下划线,},]}Input //Form.ItemForm.Itemlabel密码namepasswordrules{[{ required: true, message: 请输入密码 }]}Input.Password //Form.ItemForm.ItemnameremembervaluePropNamecheckedwrapperCol{{ offset: 6, span: 16 }}{/* 表单需要有name和value才能提交valuePropname就是将Checkbox的checked属性即选中的属性true || false当作值 */}Checkbox记住我/Checkbox/Form.ItemForm.Item wrapperCol{{ offset: 6, span: 16 }}SpaceButton typeprimary htmlTypesubmit登录/ButtonLink to{REGISTER_PATHNAME}注册新用户/Link/Space/Form.Item/Form/div/div);
};
export default Login;
