react-问卷星项目（7）

实战

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] = useState<string>("hello");function handleChange(event: ChangeEvent<HTMLInputElement>) {// event.target.value就是当前input的值setText(event.target.value);}return (<div><input 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] = useState<string>("hello");function handleChange(event: ChangeEvent<HTMLTextAreaElement>) {// 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: ChangeEvent<HTMLInputElement>) {// event.target.value就是当前input的值setGender(event.target.value);}return (<div><label htmlFor="radio1">男</label><inputtype="radio"id="radio1"name="gender"value="male"checked={gender == "male"}onChange={handleChange}/><label htmlFor="radio2">女</label><inputtype="radio"id="radio2"name="gender"value="female"checked={gender === "female"}onChange={handleChange}/><button onClick={() => console.log(gender)}>打印</button></div>);
}export default App;

checkbox复选

function App() {const [selectedList, setSelectedList] = useState<string[]>([]);function handleCityChange(event: ChangeEvent<HTMLInputElement>) {// 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 htmlFor="checkbox1">北京</label><inputtype="checkbox"id="checkbox1"value="beijing"checked={selectedList.includes("beijing")}onChange={handleCityChange}/><label htmlFor="checkbox2">上海</label><inputtype="checkbox"id="checkbox2"value="shanghai"checked={selectedList.includes("shanghai")}onChange={handleCityChange}/><label htmlFor="checkbox3">深圳</label><inputtype="checkbox"id="checkbox3"value="shenzhen"checked={selectedList.includes("shenzhen")}onChange={handleCityChange}/>{/* 方便表单获取和提交 */}<inputtype="hidden"name="cityInput"value={JSON.stringify(selectedList)}/></>);
}export default App;

select下拉框

function App() {const [lang, setLang] = useState("js");function handleChange(event: ChangeEvent<HTMLSelectElement>) {// event.target.value就是当前input的值setLang(event.target.value);}return (<>{/* 不设置state的话选择了没反应 */}<select value={lang} onChange={handleChange}><option value="java">Java</option><option value="C++">C++</option><option value="python">Python</option></select></>);
}

form表单组件

function App() {function handleSubmit(event: ChangeEvent<HTMLFormElement>) {event.preventDefault(); // 阻止默认行为，即不会提交到action// 可以自行处理提交的逻辑}return (<>{/* 点击提交后会将相应的数据发送到action中填写的接口。提交的就是name和value */}{/* 没有name，没有value的话会导致提交无法识别 */}{/* 隐藏input（type:hidden）的价值就在于可以把想要提交的数据偷偷提交上去 */}{/* onSubmit提交前调用的钩子函数，可以阻止默认行为，不然点击就直接提交了 */}<form action="/api/post" onSubmit={handleSubmit}><input /><br /><textarea /><input type="hidden" /><button type="submit">提交</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: ChangeEvent<HTMLInputElement>) {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}><div><Space><Title level={2}><UserAddOutlined /></Title><Title level={2}>注册新用户</Title></Space></div><div><FormlabelCol={{ span: 6 }}wrapperCol={{ span: 16 }}onFinish={onFinish}><Form.Item label="用户名" name="userName"><Input /></Form.Item><Form.Item label="密码" name="passWord"><Input.Password /></Form.Item><Form.Item label="确认密码" name="conFirm"><Input.Password /></Form.Item><Form.Item label="昵称" name="nickName"><Input /></Form.Item><Form.Item wrapperCol={{ offset: 8, span: 16 }}><Space>{/* htmlType就是之前html里的type，只是前面设置属性被占用了，用这个一样的效果都是为了触发方法 */}<Button type="primary" htmlType="submit">注册</Button></Space><Link 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}><div><Space><Title level={2}><UserAddOutlined /></Title><Title level={2}>用户登录</Title></Space></div><div><FormlabelCol={{ span: 6 }}wrapperCol={{ span: 16 }}onFinish={onFinish}// 默认remember设置为trueinitialValues={{ remember: true }}// 将返回值关联起来，即使其变成受控组件form={form}><Form.Item label="用户名" name="username"><Input /></Form.Item><Form.Item label="密码" name="password"><Input.Password /></Form.Item><Form.Itemname="remember"valuePropName="checked"wrapperCol={{ offset: 6, span: 16 }}>{/* 表单需要有name和value才能提交，valuePropname就是将Checkbox的checked属性，即选中的属性（true || false）当作值 */}<Checkbox>记住我</Checkbox></Form.Item><Form.Item wrapperCol={{ offset: 6, span: 16 }}><Space><Button type="primary" htmlType="submit">登录</Button><Link 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}><div><Space><Title level={2}><UserAddOutlined /></Title><Title level={2}>注册新用户</Title></Space></div><div><FormlabelCol={{ span: 6 }}wrapperCol={{ span: 16 }}onFinish={onFinish}><Form.Itemlabel="用户名"name="username"rules={[{ required: true, message: "请输入用户名" },// string表示按长度计算区间范围，不然变成数字就成最小5最大20了{type: "string",min: 5,max: 20,message: "字符长度在5-20之间",},{pattern: /^\w+$/,message: "只能是字母数字下划线",},]}><Input /></Form.Item><Form.Itemlabel="密码"name="password"// required表示必填项，会出现红点rules={[{ required: true, message: "请输入密码" }]}><Input.Password /></Form.Item><Form.Itemlabel="确认密码"name="confirm"// 依赖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.Item><Form.Item label="昵称" name="nickname"><Input /></Form.Item><Form.Item wrapperCol={{ offset: 8, span: 16 }}><Space>{/* htmlType就是之前html里的type，只是前面设置属性被占用了，用这个一样的效果都是为了触发方法 */}<Button type="primary" htmlType="submit">注册</Button><Link 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}><div><Space><Title level={2}><UserAddOutlined /></Title><Title level={2}>用户登录</Title></Space></div><div><FormlabelCol={{ span: 6 }}wrapperCol={{ span: 16 }}onFinish={onFinish}// 默认remember设置为trueinitialValues={{ remember: true }}// 将返回值关联起来，即使其变成受控组件form={form}><Form.Itemlabel="用户名"name="username"rules={[{ required: true, message: "请输入用户名" },// string表示按长度计算区间范围，不然变成数字就成最小5最大20了{type: "string",min: 5,max: 20,message: "字符长度在5-20之间",},{pattern: /^\w+$/,message: "只能是字母数字下划线",},]}><Input /></Form.Item><Form.Itemlabel="密码"name="password"rules={[{ required: true, message: "请输入密码" }]}><Input.Password /></Form.Item><Form.Itemname="remember"valuePropName="checked"wrapperCol={{ offset: 6, span: 16 }}>{/* 表单需要有name和value才能提交，valuePropname就是将Checkbox的checked属性，即选中的属性（true || false）当作值 */}<Checkbox>记住我</Checkbox></Form.Item><Form.Item wrapperCol={{ offset: 6, span: 16 }}><Space><Button type="primary" htmlType="submit">登录</Button><Link to={REGISTER_PATHNAME}>注册新用户</Link></Space></Form.Item></Form></div></div>);
};
export default Login;