最后效果:
1.效果图
2.检查表单项的格式3.格式无误时,控制台打印表单内容
遇到的报错:
-
react Form submission canceled because the form is not connected
input内按回车会出发表单的默认提交事件
解决方式:将button的type设置为button -
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot printWarning @ react-dom.development.js:86
解决方式:把引入方式改为var ReactDOM = require('react-dom/client');
关于 React 18 和 ReactDOM.render 的浏览器控制台警告 # 12219 -
解决 元素隐式具有 “any“ 类型,因为类型为 “string“ 的表达式不能用于索引类型 “Object“。 在类型 “Object“ 上找不到具有类型为 “string“ 的参数的索引签名
解决方式
遇到的问题:
- 不能按照官方的方法引入 createRoot
使用 require 引入不报错 - 不知道用ts约束defaultState,对state有没有效果;只会对defaultState进行约束,不会对state进行约束。
用let [form,setForm] = useState<FormStandard>(DEFAULT_STATE)
- 不会改变 state 对象中的某一个值
用Object.assign(formData, { [name]: value })
或setFormData({ …formData, [name]: value })
- index.tsx 中,
setFormData({ ...formData, [key]: '' })
没法修改formData;
用的Object.assign(formData, { [key]: '' })
就可以。
因为 setFormData 是异步的,改变不会立即生效,可以先改变各个表单项的 state,在提交的时候在使用 Object.assign 对 formData 进行改变。
TODO:
- 常量要大写
- 一般props都要约束类型
- event有对应的类型,少用any
ts react Event 事件对象类型 - 简单的 if else 判断可以用三元运算符,可以不用单独写一个函数
- if else 时一般把错误放在前面,else 用于最后兜底
- 避免 if else 多层嵌套
- 提交时一次显示所有问题,不要弹多次框
- 在修改和编辑 formData 时不要对同一个 formData 进行操作,可以先深拷贝,对拷贝后的值操作,最后使用 Object.assign 对目标 state 进行修改
- 注意逻辑问题,代码可读性要强
笔记:
- 更新state的几种方法
Object.assign()
Object.assign(formData, { [name]: value })setData({…data, key: newValue})
setFormData({ …formData, [name]: value })设置一个新的对象,全部替换
const newObj = { …formData, [name]: value }
setFormData(newObj)
- undefined null ’ ’ 真值都为false