react+ts 弹窗组件

最后效果:

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的几种方法

1. Object.assign()
   Object.assign(formData, { [name]: value })

2. setData({…data, key: newValue})
   setFormData({ …formData, [name]: value })

3. 设置一个新的对象，全部替换
   const newObj = { …formData, [name]: value }
   setFormData(newObj)

• undefined null ’ ’ 真值都为false

代码链接

弹框组件

这篇好文章是转载于：学新通技术网