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

代码链接

弹框组件

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值