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
    评论
React+TypeScript脚手架是一种用于创建React项目的工具。通过使用create-react-app脚手架,可以快速搭建一个React项目,并且使用TypeScript作为项目的开发语言。\[1\] 使用步骤如下: 1. 首先,需要安装create-react-app工具。可以通过以下命令进行安装: ``` npm i create-react-app -g ``` 或者 ``` yarn add create-react-app -g ``` 2. 然后,使用create-react-app命令来创建一个React+TypeScript项目。命令的格式如下: ``` npx create-react-app <项目名> --template typescript ``` 注意,项目名不要使用中文,否则会报错。\[2\] 3. 创建完成后,可以在VSCode中打开项目。可以看到项目中已经生成了React项目的雏形,组件的后缀为.tsx,这说明成功创建了React+TypeScript项目。\[1\] 4. 在项目中,可以根据需要进行配置。通常,可以在App组件中进行配置,例如引入所需的组件、样式和路由等。\[3\] 希望以上信息对你有帮助!如果还有其他问题,请随时提问。 #### 引用[.reference_title] - *1* *3* [react+ts搭建](https://blog.csdn.net/m0_56540662/article/details/124267829)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [React+ts搭建脚手架](https://blog.csdn.net/weixin_51612593/article/details/120249135)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值